-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSHF-spoiler.html
745 lines (706 loc) · 59.1 KB
/
SHF-spoiler.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
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="sets/SHF-files/icon.png"/>
<link rel="stylesheet" href="/resources/header.css">
<title>SHF visual spoiler</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overscroll-behavior: none;
background-size: cover;
background-attachment: fixed;
}
.main-content {
position: relative;
width: 100%;
float: left;
z-index: 2;
justify-items: center;
}
.sidebar {
position: sticky;
top: 0;
display: none;
text-align: center;
padding-right: 3%;
z-index: 1;
justify-items: center;
}
.sidebar-container {
width: 80%;
max-width: 375px;
position: relative;
}
.sidebar-h-img {
display: none;
transform: rotate(90deg);
position: absolute;
left: 10%;
top: 10%;
width: 85%;
}
.sidebar-img {
vertical-align: middle;
width: 100%;
}
.close-btn {
background: url('img/close.png') no-repeat;
background-size: contain;
background-position: center;
width: 10%;
height: 10%;
border: none;
cursor: pointer;
position: absolute;
right: 4%;
}
.close-btn:hover {
background: url('img/close-hover.png') no-repeat;
background-size: contain;
background-position: center;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 2px;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 3%;
justify-items: center;
max-width: 1200px;
}
.grid-container img {
width: 100%;
height: auto;
display: block;
visibility: hidden;
cursor: pointer;
}
.banner {
width: 100%;
height: auto;
padding-top: 20px;
padding-bottom: 50px;
}
.logo {
display: block;
margin: auto;
max-width: 30%;
max-height: 320px;
}
.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
height: auto;
}
.flip-btn {
background: url('img/flip.png') no-repeat;
background-size: contain;
background-position: center;
width: 15%;
height: 11%;
cursor: pointer;
border: none;
position: absolute;
left: 50%;
top: 48%;
transform: translate(-50%, -50%);
opacity: 0.5;
}
.flip-btn:hover {
background: url('img/flip-hover.png') no-repeat;
background-size: contain;
background-position: center;
}
.icon-bar {
display: grid;
grid-template-columns: repeat(10, 3fr 2fr) 3fr;
gap: 1px;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 1%;
justify-items: center;
align-items: center;
}
.icon-bar .icon img {
width: 90%;
max-width: 80px;
height: auto;
display: block;
padding: 5%;
margin: auto;
text-align: center;
}
.icon-bar .dot img {
width: 50%;
max-width: 65px;
height: auto;
display: block;
margin: auto;
text-align: center;
}
.preload-hidden {
display: none;
}
/* This is here to enable the stickiness in a Float environment. I don't know why it works but it does */
.footer {
clear: both;
}
</style>
</head>
<body>
<img class="preload-hidden" src="/img/dot.png" />
<img class="preload-hidden" src="/sets/SHF-files/logo.png" />
<img class="preload-hidden" src="/sets/SHF-files/icon.png" />
<img class="preload-hidden" src="/sets/GSS-files/icon.png" />
<img class="preload-hidden" src="/sets/KND-files/icon.png" />
<img class="preload-hidden" src="/sets/NJB-files/icon.png" />
<img class="preload-hidden" src="/sets/ACE-files/icon.png" />
<img class="preload-hidden" id="bg" src="/sets/SHF-files/bg.png" />
<div class="header">
<div class="search-grid">
<a href="/"><img class="sg-logo" src="/img/banner.png"></a>
<img class="sg-icon" src="/img/search.png">
<input type="text" inputmode="search" placeholder="Search ..." name="search" id="search" spellcheck="false" autocomplete="off" autocorrect="off" spellcheck="false">
<a href="/all-sets"><img src="/img/sets.png" class="sg-icon">Sets</a>
<a href="/deckbuilder"><img src="/img/deck.png" class="sg-icon">Deckbuilder</a>
<a onclick="randomCard()"><img src="/img/random.png" class="sg-icon">Random</a>
</div>
</div>
<div class="icon-bar">
<div class="icon"><a href="SHF-spoiler"><img src="sets/SHF-files/icon.png"></img></a></div>
<div class="dot"><img src="img/dot.png"></img></div>
<div class="icon"><a href="GSS-spoiler"><img src="sets/GSS-files/icon.png"></img></a></div>
<div class="dot"><img src="img/dot.png"></img></div>
<div class="icon"><a href="KND-spoiler"><img src="sets/KND-files/icon.png"></img></a></div>
<div class="dot"><img src="img/dot.png"></img></div>
<div class="icon"><a href="NJB-spoiler"><img src="sets/NJB-files/icon.png"></img></a></div>
<div class="dot"><img src="img/dot.png"></img></div>
<div class="icon"><a href="ACE-spoiler"><img src="sets/ACE-files/icon.png"></img></a></div>
</div>
<div class="banner">
<img class="logo" src="sets/SHF-files/logo.png">
</div>
<div class="main-content" id="main-content">
<div class="grid-container">
<div class="container"><img alt="sets\SHF-files\img\36_Zarax Broodqueen.png" id="36" data-flag="@X" onclick="openSidebar('36',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\50_Enter the Era of Stars.png" id="50" data-flag="@X" onclick="openSidebar('50',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\79_The Black Mask.png" id="79" data-flag="@X" onclick="openSidebar('79',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\137_Sigrid, the Golden Gunmaiden.png" id="137" data-flag="@X" onclick="openSidebar('137',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\157_Evolution Event.png" id="157" data-flag="@X" onclick="openSidebar('157',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\2_Annie White Rose Harper.png" id="2" data-flag="@X" onclick="openSidebar('2',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\68_Sirocco Cruiser.png" id="68" data-flag="@X" onclick="openSidebar('68',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\83_Debt Collectors.png" id="83" data-flag="@X" onclick="openSidebar('83',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\147_Wreckage Ravager.png" id="147" data-flag="@X" onclick="openSidebar('147',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\169_Roaming Cactegu.png" id="169" data-flag="@X" onclick="openSidebar('169',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\5_Blessing of the Twin Suns.png" id="5" data-flag="@X" onclick="openSidebar('5',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\38_Ad Astra.png" id="38" data-flag="@X" onclick="openSidebar('38',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\88_The Gallows at Whiskey Bend.png" id="88" data-flag="@X" onclick="openSidebar('88',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\115_Chase the Ace.png" id="115" data-flag="@X" onclick="openSidebar('115',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\172_Skinshifting Puma.png" id="172" data-flag="@X" onclick="openSidebar('172',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\11_Drifting Moon.png" id="11" data-flag="@X" onclick="openSidebar('11',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\39_Aione, the First Galaxian.png" id="39" data-flag="@X" onclick="openSidebar('39',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\98_Nox, the Graven Gunman.png" id="98" data-flag="@X" onclick="openSidebar('98',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\121_Fireball Bootleggers.png" id="121" data-flag="@X" onclick="openSidebar('121',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\150_Barbed Cactimber.png" id="150" data-flag="@X" onclick="openSidebar('150',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\23_Opportune Musketeer.png" id="23" data-flag="@X" onclick="openSidebar('23',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\44_Canyon Maraterra.png" id="44" data-flag="@X" onclick="openSidebar('44',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\105_Shadowband Posse.png" id="105" data-flag="@X" onclick="openSidebar('105',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\125_Gearworks Pest.png" id="125" data-flag="@X" onclick="openSidebar('125',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\156_Cross the Verge.png" id="156" data-flag="@X" onclick="openSidebar('156',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\24_Procession of the Alliance.png" id="24" data-flag="@X" onclick="openSidebar('24',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\55_Jack Flash Jacobs.png" id="55" data-flag="@X" onclick="openSidebar('55',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\107_Spray and Pray.png" id="107" data-flag="@X" onclick="openSidebar('107',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\130_Kaelan Nova, Starsplitter.png" id="130" data-flag="@X" onclick="openSidebar('130',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\170_Scourge of Devil's Spine.png" id="170" data-flag="@X" onclick="openSidebar('170',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\32_Sunset Over Pike's Chapel.png" id="32" data-flag="@X" onclick="openSidebar('32',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\58_Lunar Fallout.png" id="58" data-flag="@X" onclick="openSidebar('58',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\110_Xiong Mao, a.k.a. Rusty.png" id="110" data-flag="@X" onclick="openSidebar('110',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\138_Skyfissure Dragon.png" id="138" data-flag="@X" onclick="openSidebar('138',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\177_Tactical Emesis.png" id="177" data-flag="@X" onclick="openSidebar('177',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\6_Boot Hill Liberator.png" id="6" data-flag="@X" onclick="openSidebar('6',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\67_Shadow Puppeteer.png" id="67" data-flag="@X" onclick="openSidebar('67',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\76_Backland Scrounger.png" id="76" data-flag="@X" onclick="openSidebar('76',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\145_Volatile Machinations.png" id="145" data-flag="@X" onclick="openSidebar('145',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\180_Verdurous Sibyl.png" id="180" data-flag="@X" onclick="openSidebar('180',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\8_Caravan Sideshow.png" id="8" data-flag="@X" onclick="openSidebar('8',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\40_Akimbo Specialist.png" id="40" data-flag="@X" onclick="openSidebar('40',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\81_Corner the Black Market.png" id="81" data-flag="@X" onclick="openSidebar('81',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\112_Beast of the Bluffs.png" id="112" data-flag="@X" onclick="openSidebar('112',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\185_Where the Wild Things Are.png" id="185" data-flag="@X" onclick="openSidebar('185',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\9_Celestial Disturbance.png" id="9" data-flag="@X" onclick="openSidebar('9',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\42_Back Country Navigator.png" id="42" data-flag="@X" onclick="openSidebar('42',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\84_Dust Devil Lieutenant.png" id="84" data-flag="@X" onclick="openSidebar('84',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\113_Blitzreaver.png" id="113" data-flag="@X" onclick="openSidebar('113',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\148_Aim Skyward.png" id="148" data-flag="@X" onclick="openSidebar('148',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\10_Charitable Oktujo.png" id="10" data-flag="@X" onclick="openSidebar('10',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\46_Crash Site Curators.png" id="46" data-flag="@X" onclick="openSidebar('46',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\89_Ghost Town Crier.png" id="89" data-flag="@X" onclick="openSidebar('89',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\114_Bounty Hunting.png" id="114" data-flag="@X" onclick="openSidebar('114',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\151_Barging Tusker.png" id="151" data-flag="@X" onclick="openSidebar('151',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\16_Hissing Sunspitter.png" id="16" data-flag="@X" onclick="openSidebar('16',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\47_Crimson Sea Glider.png" id="47" data-flag="@X" onclick="openSidebar('47',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\90_Grim Visionary.png" id="90" data-flag="@X" onclick="openSidebar('90',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\118_Debris Pillager.png" id="118" data-flag="@X" onclick="openSidebar('118',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\153_Burgeoning Cactiger.png" id="153" data-flag="@X" onclick="openSidebar('153',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\17_Laden Steed.png" id="17" data-flag="@X" onclick="openSidebar('17',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\51_Ephemeral Fennec.png" id="51" data-flag="@X" onclick="openSidebar('51',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\92_Hunter of the Helpless.png" id="92" data-flag="@X" onclick="openSidebar('92',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\120_Fire at Shaw's Chapel.png" id="120" data-flag="@X" onclick="openSidebar('120',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\155_Chirring Rig.png" id="155" data-flag="@X" onclick="openSidebar('155',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\18_Leave in the Dust.png" id="18" data-flag="@X" onclick="openSidebar('18',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\56_Kono, Galvanic Gunman.png" id="56" data-flag="@X" onclick="openSidebar('56',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\93_Hunter's Carapace.png" id="93" data-flag="@X" onclick="openSidebar('93',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\126_Gearworks Supervisor.png" id="126" data-flag="@X" onclick="openSidebar('126',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\159_Jake's Sentinels.png" id="159" data-flag="@X" onclick="openSidebar('159',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\20_A Long Road Ahead.png" id="20" data-flag="@X" onclick="openSidebar('20',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\59_Magnetic Flux.png" id="59" data-flag="@X" onclick="openSidebar('59',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\95_Lever-Action at Nearly-Lethal Range.png" id="95" data-flag="@X" onclick="openSidebar('95',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\127_Get the Drop.png" id="127" data-flag="@X" onclick="openSidebar('127',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\161_Moss-Laden Leaper.png" id="161" data-flag="@X" onclick="openSidebar('161',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\21_Luke The Duke McCall.png" id="21" data-flag="@X" onclick="openSidebar('21',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\61_Qualms of Conscience.png" id="61" data-flag="@X" onclick="openSidebar('61',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\96_Merciless Plunder.png" id="96" data-flag="@X" onclick="openSidebar('96',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\128_Guns A-Blazing.png" id="128" data-flag="@X" onclick="openSidebar('128',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\163_A New Horizon Calls.png" id="163" data-flag="@X" onclick="openSidebar('163',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\25_Quickdraw Revolver.png" id="25" data-flag="@X" onclick="openSidebar('25',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\63_Run Off the Tracks.png" id="63" data-flag="@X" onclick="openSidebar('63',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\97_Mr. Skath of the Brain Gang.png" id="97" data-flag="@X" onclick="openSidebar('97',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\129_Hemophage Infuser.png" id="129" data-flag="@X" onclick="openSidebar('129',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\165_Oktujo Tracker.png" id="165" data-flag="@X" onclick="openSidebar('165',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\27_Sandsteppe Trooper.png" id="27" data-flag="@X" onclick="openSidebar('27',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\66_Scrapper's Shank.png" id="66" data-flag="@X" onclick="openSidebar('66',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\99_Pestilent Ghelhound.png" id="99" data-flag="@X" onclick="openSidebar('99',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\132_Now Watch Me Whip.png" id="132" data-flag="@X" onclick="openSidebar('132',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\171_Silent Sands Wanderer.png" id="171" data-flag="@X" onclick="openSidebar('171',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\29_The Shot That Saved Skyhaven.png" id="29" data-flag="@X" onclick="openSidebar('29',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\69_Skyhaven Deputy.png" id="69" data-flag="@X" onclick="openSidebar('69',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\100_Pit Cockatrice.png" id="100" data-flag="@X" onclick="openSidebar('100',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\134_Ravine Thresher.png" id="134" data-flag="@X" onclick="openSidebar('134',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\174_Slobbering Moa.png" id="174" data-flag="@X" onclick="openSidebar('174',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\35_Varathian Foragers.png" id="35" data-flag="@X" onclick="openSidebar('35',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\70_Slicky Glump.png" id="70" data-flag="@X" onclick="openSidebar('70',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\108_Subterranean Ravager.png" id="108" data-flag="@X" onclick="openSidebar('108',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\139_Slag Spitter.png" id="139" data-flag="@X" onclick="openSidebar('139',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\181_Virulent Cactaipan.png" id="181" data-flag="@X" onclick="openSidebar('181',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\37_Zarax Duelist.png" id="37" data-flag="@X" onclick="openSidebar('37',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\71_Starshard.png" id="71" data-flag="@X" onclick="openSidebar('71',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\109_Terminal Dehydration.png" id="109" data-flag="@X" onclick="openSidebar('109',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\140_Snatch and Grab.png" id="140" data-flag="@X" onclick="openSidebar('140',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\182_Vulture's Bounty.png" id="182" data-flag="@X" onclick="openSidebar('182',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\3_Back Where You Came From.png" id="3" data-flag="@X" onclick="openSidebar('3',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\72_This Town Ain't Big Enough.png" id="72" data-flag="@X" onclick="openSidebar('72',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\75_Ar'Ghel Desperado.png" id="75" data-flag="@X" onclick="openSidebar('75',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\144_Trickshot Artist.png" id="144" data-flag="@X" onclick="openSidebar('144',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\183_Warping Wilds.png" id="183" data-flag="@X" onclick="openSidebar('183',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\4_Bladetusk Herd.png" id="4" data-flag="@X" onclick="openSidebar('4',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\41_Astral Projection.png" id="41" data-flag="@X" onclick="openSidebar('41',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\77_Become Carrion.png" id="77" data-flag="@X" onclick="openSidebar('77',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\111_Badland Hustler.png" id="111" data-flag="@X" onclick="openSidebar('111',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\184_Weathered Survivor.png" id="184" data-flag="@X" onclick="openSidebar('184',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\7_Boot Hill Outrider.png" id="7" data-flag="@X" onclick="openSidebar('7',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\43_Breaching Slugsnout.png" id="43" data-flag="@X" onclick="openSidebar('43',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\78_Bet Against Death.png" id="78" data-flag="@X" onclick="openSidebar('78',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\116_Crimson Sea Sabertooth.png" id="116" data-flag="@X" onclick="openSidebar('116',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\149_The Art of the Draw.png" id="149" data-flag="@X" onclick="openSidebar('149',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\12_Eldoria Sureshot.png" id="12" data-flag="@X" onclick="openSidebar('12',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\45_Corpus Cobbler.png" id="45" data-flag="@X" onclick="openSidebar('45',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\80_Come to Collect.png" id="80" data-flag="@X" onclick="openSidebar('80',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\117_Deadheat Duo.png" id="117" data-flag="@X" onclick="openSidebar('117',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\152_Bristly Landing.png" id="152" data-flag="@X" onclick="openSidebar('152',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\13_Feisty Scrapper.png" id="13" data-flag="@X" onclick="openSidebar('13',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\48_Croak.png" id="48" data-flag="@X" onclick="openSidebar('48',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\82_Dead Man Walkin'.png" id="82" data-flag="@X" onclick="openSidebar('82',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\119_Dynamite in the Cargo Hold.png" id="119" data-flag="@X" onclick="openSidebar('119',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\154_Cactaurus.png" id="154" data-flag="@X" onclick="openSidebar('154',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\14_Fleetfinger Five-Shooter.png" id="14" data-flag="@X" onclick="openSidebar('14',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\49_Crystallize.png" id="49" data-flag="@X" onclick="openSidebar('49',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\85_Experiment X.png" id="85" data-flag="@X" onclick="openSidebar('85',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\122_Five-Alarm Firearm.png" id="122" data-flag="@X" onclick="openSidebar('122',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\158_Gang Mentality.png" id="158" data-flag="@X" onclick="openSidebar('158',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\15_Galvanized Recruiter.png" id="15" data-flag="@X" onclick="openSidebar('15',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\52_Fleetfoot Screecher.png" id="52" data-flag="@X" onclick="openSidebar('52',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\86_Face the Night.png" id="86" data-flag="@X" onclick="openSidebar('86',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\123_Frontier Justice.png" id="123" data-flag="@X" onclick="openSidebar('123',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\160_Migratory Grazer.png" id="160" data-flag="@X" onclick="openSidebar('160',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\19_Long Arm of the Law.png" id="19" data-flag="@X" onclick="openSidebar('19',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\53_Flintlock Lass.png" id="53" data-flag="@X" onclick="openSidebar('53',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\87_Fen Conservators.png" id="87" data-flag="@X" onclick="openSidebar('87',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\124_Fuselage Scavenger.png" id="124" data-flag="@X" onclick="openSidebar('124',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\162_New Growth in Old Haunts.png" id="162" data-flag="@X" onclick="openSidebar('162',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\22_Make Your Move.png" id="22" data-flag="@X" onclick="openSidebar('22',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\54_Itinerant Oktujo.png" id="54" data-flag="@X" onclick="openSidebar('54',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\91_Gulch Ranger.png" id="91" data-flag="@X" onclick="openSidebar('91',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\131_Lock, Stock, and Smoke.png" id="131" data-flag="@X" onclick="openSidebar('131',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\164_Oktujo Migration.png" id="164" data-flag="@X" onclick="openSidebar('164',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\26_Roadside Raconteur.png" id="26" data-flag="@X" onclick="openSidebar('26',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\57_Lost on the Horizon.png" id="57" data-flag="@X" onclick="openSidebar('57',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\94_Junkyard Vulture.png" id="94" data-flag="@X" onclick="openSidebar('94',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\133_Pack Monitor.png" id="133" data-flag="@X" onclick="openSidebar('133',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\166_Razorgorge Wurm.png" id="166" data-flag="@X" onclick="openSidebar('166',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\28_Shoot Your Shot.png" id="28" data-flag="@X" onclick="openSidebar('28',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\60_On a Cool Summer's Night.png" id="60" data-flag="@X" onclick="openSidebar('60',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\101_Retribution for a Gamblin' Man.png" id="101" data-flag="@X" onclick="openSidebar('101',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\135_Risky Wager.png" id="135" data-flag="@X" onclick="openSidebar('135',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\167_Reedcreeper Posse.png" id="167" data-flag="@X" onclick="openSidebar('167',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\30_Skychaser Trainer.png" id="30" data-flag="@X" onclick="openSidebar('30',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\62_Quickdraw Broker.png" id="62" data-flag="@X" onclick="openSidebar('62',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\102_Ride on the Wild Side.png" id="102" data-flag="@X" onclick="openSidebar('102',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\136_Salvage Trafficker.png" id="136" data-flag="@X" onclick="openSidebar('136',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\168_Rhangol Wrangler.png" id="168" data-flag="@X" onclick="openSidebar('168',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\31_Skysteed.png" id="31" data-flag="@X" onclick="openSidebar('31',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\64_Sandskiff Raider.png" id="64" data-flag="@X" onclick="openSidebar('64',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\103_Run Train.png" id="103" data-flag="@X" onclick="openSidebar('103',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\141_Sunforge Outlaw.png" id="141" data-flag="@X" onclick="openSidebar('141',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\173_Skyfall Acolyte.png" id="173" data-flag="@X" onclick="openSidebar('173',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\33_Tradewind Courier.png" id="33" data-flag="@X" onclick="openSidebar('33',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\65_Scrapfield Migrant.png" id="65" data-flag="@X" onclick="openSidebar('65',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\104_Seeker of Sinner's Court.png" id="104" data-flag="@X" onclick="openSidebar('104',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\142_Tendril Trap.png" id="142" data-flag="@X" onclick="openSidebar('142',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\175_Stardust Courier.png" id="175" data-flag="@X" onclick="openSidebar('175',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\34_Unbridled Colt.png" id="34" data-flag="@X" onclick="openSidebar('34',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\73_Wreckage of the Starbreaker.png" id="73" data-flag="@X" onclick="openSidebar('73',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\106_Silent Sands Survivor.png" id="106" data-flag="@X" onclick="openSidebar('106',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\143_Terror of Thrasher's Pass.png" id="143" data-flag="@X" onclick="openSidebar('143',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\176_Stoic Steadhand.png" id="176" data-flag="@X" onclick="openSidebar('176',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\74_Zarax Broodling.png" id="74" data-flag="@X" onclick="openSidebar('74',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\146_Whiskey Bend Marshal.png" id="146" data-flag="@X" onclick="openSidebar('146',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\178_Territorial Domination.png" id="178" data-flag="@X" onclick="openSidebar('178',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\179_Travellers on Yonder.png" id="179" data-flag="@X" onclick="openSidebar('179',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\233_Xylo, the Starfallen.png" id="233" data-flag="@X" onclick="openSidebar('233',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\197_Cut from the Same Cloth.png" id="197" data-flag="@X" onclick="openSidebar('197',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\190_The Blood Meridian.png" id="190" data-flag="@X" onclick="openSidebar('190',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\208_Hunted Sandwurm.png" id="208" data-flag="@X" onclick="openSidebar('208',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\187_Amberhorn Bear.png" id="187" data-flag="@X" onclick="openSidebar('187',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\194_Cloudbreacher Oktujo.png" id="194" data-flag="@X" onclick="openSidebar('194',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\204_Goon Squad.png" id="204" data-flag="@X" onclick="openSidebar('204',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\219_Preacher Moore.png" id="219" data-flag="@X" onclick="openSidebar('219',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\220_Ravenous Cactyrant.png" id="220" data-flag="@X" onclick="openSidebar('220',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\212_Juniper Greenthumb Carter.png" id="212" data-flag="@X" onclick="openSidebar('212',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\231_The Varathian Consulate.png" id="231" data-flag="@X" onclick="openSidebar('231',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\205_Gulch Bandit.png" id="205" data-flag="@X" onclick="openSidebar('205',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\224_The Siege at Cutler's Corral.png" id="224" data-flag="@X" onclick="openSidebar('224',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\215_Maverick Mutt.png" id="215" data-flag="@X" onclick="openSidebar('215',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\195_Consulate Nomads.png" id="195" data-flag="@X" onclick="openSidebar('195',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\200_Force Propulsion.png" id="200" data-flag="@X" onclick="openSidebar('200',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\230_Underrift War Merchant.png" id="230" data-flag="@X" onclick="openSidebar('230',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\206_Hotshot Rifle.png" id="206" data-flag="@X" onclick="openSidebar('206',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\232_Whiptail Manticore.png" id="232" data-flag="@X" onclick="openSidebar('232',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\202_The Gang's All Here.png" id="202" data-flag="@X" onclick="openSidebar('202',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\234_Zarax Supermajor.png" id="234" data-flag="@X" onclick="openSidebar('234',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\216_Mesa Interloper.png" id="216" data-flag="@X" onclick="openSidebar('216',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\198_Eli, Wistful Drifter.png" id="198" data-flag="@X" onclick="openSidebar('198',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\199_The Folly of Yesteryear.png" id="199" data-flag="@X" onclick="openSidebar('199',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\227_The Starholme Frontier.png" id="227" data-flag="@X" onclick="openSidebar('227',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\193_Clementine Cogs Faraday.png" id="193" data-flag="@X" onclick="openSidebar('193',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\188_Amelia Hawkeye Hayes.png" id="188" data-flag="@X" onclick="openSidebar('188',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\214_Marketto, the Trafficker.png" id="214" data-flag="@X" onclick="openSidebar('214',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\207_Hound of the Hellbreak.png" id="207" data-flag="@X" onclick="openSidebar('207',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\213_Make Sense from Scrap.png" id="213" data-flag="@X" onclick="openSidebar('213',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\209_Impavid Trailblazer.png" id="209" data-flag="@X" onclick="openSidebar('209',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\192_Carson Livewire Legette.png" id="192" data-flag="@X" onclick="openSidebar('192',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\217_Morris and the Lacy Gang.png" id="217" data-flag="@X" onclick="openSidebar('217',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\191_Bloodsand Gorger.png" id="191" data-flag="@X" onclick="openSidebar('191',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\218_Oktujo Shepherd.png" id="218" data-flag="@X" onclick="openSidebar('218',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\222_Shifty Dealer.png" id="222" data-flag="@X" onclick="openSidebar('222',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\223_Shootout at the Mesa.png" id="223" data-flag="@X" onclick="openSidebar('223',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\189_Barron, the Smoke.png" id="189" data-flag="@X" onclick="openSidebar('189',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\196_Cosmic Restitcher.png" id="196" data-flag="@X" onclick="openSidebar('196',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\201_Frilled Starspitter.png" id="201" data-flag="@X" onclick="openSidebar('201',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\228_Tumultuous Flare.png" id="228" data-flag="@X" onclick="openSidebar('228',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\186_Hot Hands Lurk.png" id="186" data-flag="@X" onclick="openSidebar('186',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\211_Jules, the Beacon.png" id="211" data-flag="@X" onclick="openSidebar('211',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\203_Go West.png" id="203" data-flag="@X" onclick="openSidebar('203',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\225_Six-Shot Sheriff.png" id="225" data-flag="@X" onclick="openSidebar('225',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\221_Rusty, Sidewinders Brass.png" id="221" data-flag="@X" onclick="openSidebar('221',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\229_The Twilight Riders.png" id="229" data-flag="@X" onclick="openSidebar('229',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\210_Interstellar Realignment.png" id="210" data-flag="@X" onclick="openSidebar('210',true)"></div>
<div class="container"><img alt="sets\SHF-files\img\226_Stalker of the Bogs.png" id="226" data-flag="@X" onclick="openSidebar('226',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\1_The Smoking Gun.png" id="1" data-flag="@X" onclick="openSidebar('1',false)"></div>
<div class="container"><img data-alt_src="sets\SHF-files\img\235_The Apocalypse Dial_back.png" alt="sets\SHF-files\img\235_The Apocalypse Dial_front.png" id="235" data-flag="@XD" onclick="openSidebar(235,false)"><button class="flip-btn" onclick="imgFlip(235)"></button></div>
<div class="container"><img alt="sets\SHF-files\img\237_Consulate Bellwether.png" id="237" data-flag="@X" onclick="openSidebar('237',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\239_Fractured Turbine.png" id="239" data-flag="@X" onclick="openSidebar('239',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\240_Galaxian's Best Friend.png" id="240" data-flag="@X" onclick="openSidebar('240',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\241_Gunslinger's Leatherworks.png" id="241" data-flag="@X" onclick="openSidebar('241',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\244_Runaway Freight.png" id="244" data-flag="@X" onclick="openSidebar('244',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\238_The Eldoria Express.png" id="238" data-flag="@X" onclick="openSidebar('238',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\243_Noxian Visage.png" id="243" data-flag="@X" onclick="openSidebar('243',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\245_Rust Bucket.png" id="245" data-flag="@X" onclick="openSidebar('245',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\248_Trusty Ten-Gallon.png" id="248" data-flag="@X" onclick="openSidebar('248',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\249_Varathian Caravan.png" id="249" data-flag="@X" onclick="openSidebar('249',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\251_Wrought Grotesque.png" id="251" data-flag="@X" onclick="openSidebar('251',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\236_Chromatic Star.png" id="236" data-flag="@X" onclick="openSidebar('236',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\242_McCall .45 Special.png" id="242" data-flag="@X" onclick="openSidebar('242',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\246_Star Chart.png" id="246" data-flag="@X" onclick="openSidebar('246',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\247_Steadfast Reaper.png" id="247" data-flag="@X" onclick="openSidebar('247',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\250_Winestago Freighter.png" id="250" data-flag="@X" onclick="openSidebar('250',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\261_Salt Pool Citadel.png" id="261" data-flag="@X" onclick="openSidebar('261',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\258_Oil-Worn Depths.png" id="258" data-flag="@X" onclick="openSidebar('258',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\252_Basalt Quarry.png" id="252" data-flag="@X" onclick="openSidebar('252',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\272_Weirding Territory.png" id="272" data-flag="@X" onclick="openSidebar('272',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\257_Henge of Safe Passage.png" id="257" data-flag="@X" onclick="openSidebar('257',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\265_Transplanted Hive.png" id="265" data-flag="@X" onclick="openSidebar('265',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\260_Pungent Smokestacks.png" id="260" data-flag="@X" onclick="openSidebar('260',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\259_Phosphorescent Bileway.png" id="259" data-flag="@X" onclick="openSidebar('259',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\263_Stormsurge Waypoint.png" id="263" data-flag="@X" onclick="openSidebar('263',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\253_Chiseled Hideaway.png" id="253" data-flag="@X" onclick="openSidebar('253',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\255_Crystalline Clutches.png" id="255" data-flag="@X" onclick="openSidebar('255',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\256_Galactic Reach.png" id="256" data-flag="@X" onclick="openSidebar('256',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\262_The Slaughterhills.png" id="262" data-flag="@X" onclick="openSidebar('262',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\266_Transuding Grotto.png" id="266" data-flag="@X" onclick="openSidebar('266',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\270_Varathian Watchtower.png" id="270" data-flag="@X" onclick="openSidebar('270',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\264_Streets of Sunforge.png" id="264" data-flag="@X" onclick="openSidebar('264',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\267_Varathian Battery.png" id="267" data-flag="@X" onclick="openSidebar('267',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\268_Varathian Nucleus.png" id="268" data-flag="@X" onclick="openSidebar('268',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\269_Varathian Ootheca.png" id="269" data-flag="@X" onclick="openSidebar('269',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\254_Conduit Pylons.png" id="254" data-flag="@X" onclick="openSidebar('254',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\271_Wayfarer's Shrine.png" id="271" data-flag="@X" onclick="openSidebar('271',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\273_Plains.png" id="273" data-flag="@X" onclick="openSidebar('273',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\274_Island.png" id="274" data-flag="@X" onclick="openSidebar('274',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\275_Swamp.png" id="275" data-flag="@X" onclick="openSidebar('275',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\276_Mountain.png" id="276" data-flag="@X" onclick="openSidebar('276',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\277_Forest.png" id="277" data-flag="@X" onclick="openSidebar('277',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="img\er.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\1t_Mercenary.png" id="1t" data-flag="@X" onclick="openSidebar('1t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\2t_Mercenary.png" id="2t" data-flag="@X" onclick="openSidebar('2t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\3t_Scooter.png" id="3t" data-flag="@X" onclick="openSidebar('3t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\4t_Elemental.png" id="4t" data-flag="@X" onclick="openSidebar('4t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\5t_Bones.png" id="5t" data-flag="@X" onclick="openSidebar('5t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\6t_Elemental.png" id="6t" data-flag="@X" onclick="openSidebar('6t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\7t_Flesh.png" id="7t" data-flag="@X" onclick="openSidebar('7t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\8t_Beast.png" id="8t" data-flag="@X" onclick="openSidebar('8t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\9t_Plant.png" id="9t" data-flag="@X" onclick="openSidebar('9t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\10t_Bullet.png" id="10t" data-flag="@X" onclick="openSidebar('10t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\11t_Equipment.png" id="11t" data-flag="@X" onclick="openSidebar('11t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\12t_Junk.png" id="12t" data-flag="@X" onclick="openSidebar('12t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\13t_Treasure.png" id="13t" data-flag="@X" onclick="openSidebar('13t',false)"></div>
<div class="container"><img alt="sets\SHF-files\img\14t_Vehicle.png" id="14t" data-flag="@X" onclick="openSidebar('14t',false)"></div>
<div class="container"><img alt="img\e.png" id="" data-flag="@E" onclick="openSidebar('',false)"></div>
</div>
</div>
<div class="sidebar" id="sidebar">
<div class="sidebar-container">
<img id="sidebar_img" class="sidebar-img" src="img/er.png">
<img id="sidebar_h_img" class="sidebar-h-img">
<button class="flip-btn" id="sidebar-flip-btn" onclick="imgFlip('sidebar_img')"></button>
</div>
<button class="close-btn" onclick="closeSidebar()"></button>
</div>
<div class="footer"></div>
<script>
const delay = ms => new Promise(res => setTimeout(res, ms));
let specialchars = "";
document.addEventListener('DOMContentLoaded', async function() {
await fetch('/lists/all-cards.json')
.then(response => response.json())
.then(json => {
card_list = json;
}).catch(error => console.error('Error:', error));
await fetch('/resources/replacechars.txt')
.then(response => response.text())
.then(text => {
specialchars = text;
}).catch(error => console.error('Error:', error));
card_list_arrayified = card_list.cards;
preloadImgs = document.getElementsByClassName('preload-hidden');
let images_loaded = [];
do {
await delay(100);
images_loaded = []
for (const img of preloadImgs)
{
images_loaded.push(isImageOk(img));
}
}
while (images_loaded.includes(false));
document.body.style.backgroundImage = 'url(' + document.getElementById("bg").src + ')';
loadImages();
});
function isImageOk(img) {
if (!img.complete || img.naturalWidth == 0) {
return false;
}
return true;
}
function loadImages() {
const images = document.querySelectorAll('.grid-container img');
images.forEach(img => {
const flag = img.getAttribute('data-flag');
if (flag === '@N') {
img.src = 'img/card_back.png';
img.removeAttribute("onclick");
img.style.cursor = 'default';
}
else
{
img.src = img.alt;
if (flag === '@E') {
img.removeAttribute("onclick");
img.style.cursor = 'default';
}
}
img.style.visibility = 'visible';
});
}
window.addEventListener('resize', function(event) {
setSidebarTop();
}, true);
function setSidebarTop() {
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
let sh = document.getElementById('sidebar').offsetHeight;
let height = 100 * ((vh - sh) / 2) / vh;
document.getElementById('sidebar').style.top = height + '%';
}
let horizontal = false;
function imgFlip(num) {
tmp = document.getElementById(num).src;
document.getElementById(num).src = document.getElementById(num).dataset.alt_src;
document.getElementById(num).dataset.alt_src = tmp;
const rotated_img = document.getElementById('sidebar_h_img');
const sidebar_img = document.getElementById('sidebar_img');
if (horizontal && rotated_img.style.display == 'none')
{
rotated_img.style.display = "block";
sidebar_img.style.filter = "blur(2px) brightness(0.7)";
}
else
{
rotated_img.style.display = "none";
sidebar_img.style.filter = "";
}
}
function openSidebar(id, h=false) {
horizontal = h;
scroll_pct = window.scrollY / document.documentElement.scrollHeight;
document.getElementById('sidebar').style.display = 'grid';
const rotated_img = document.getElementById('sidebar_h_img');
const sidebar_img = document.getElementById('sidebar_img');
sidebar_img.src = document.getElementById(id).src;
if (horizontal)
{
rotated_img.src = document.getElementById(id).src;
rotated_img.style.display = "block";
sidebar_img.style.filter = "blur(2px) brightness(0.7)";
}
else
{
rotated_img.style.display = "none";
sidebar_img.style.filter = "";
}
if (document.getElementById(id).dataset.alt_src)
{
document.getElementById('sidebar_img').dataset.alt_src = document.getElementById(id).dataset.alt_src;
document.getElementById('sidebar-flip-btn').style.display = 'block';
}
else
{
delete document.getElementById('sidebar_img').dataset.alt_src;
document.getElementById('sidebar-flip-btn').style.display = 'none';
}
document.getElementById('main-content').style.width = '60%';
scroll_pos = scroll_pct * document.documentElement.scrollHeight;
window.scrollTo(window.scrollX, scroll_pos);
setSidebarTop();
}
function closeSidebar() {
scroll_pct = window.scrollY / document.documentElement.scrollHeight;
document.getElementById('sidebar').style.display = 'none';
document.getElementById('main-content').style.width = '100%';
scroll_pos = scroll_pct * document.documentElement.scrollHeight;
window.scrollTo(window.scrollX, scroll_pos);
}
document.getElementById("search").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
search();
}
});
function search() {
window.location = ("/search?search=" + document.getElementById("search").value);
}
function randomCard() {
let i = Math.floor(Math.random() * (card_list_arrayified.length + 1));
let card_name = card_list_arrayified[i].card_name;
for (const char of specialchars)
{
card_name = card_name.replaceAll(char, "");
}
window.location = ('/cards/' + card_list_arrayified[i].set + '/' + card_list_arrayified[i].number + '_' + card_name);
}
</script>
</body>
</html>