-
Notifications
You must be signed in to change notification settings - Fork 0
/
frame.html
113 lines (113 loc) · 3.49 KB
/
frame.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
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.outline {
filter: drop-shadow(1px 1px black)
drop-shadow(-1px -1px black)
drop-shadow(1px -1px black)
drop-shadow(-1px 1px black)
!important;
}
.shadow {
filter: drop-shadow(
max(2px, 0.1em)
max(2px, 0.1em)
max(2px, 0.1em)
rgba(0, 0, 0, 0.5)) !important;
}
.shadow_outline {
filter: drop-shadow(1px 1px black)
drop-shadow(-1px -1px black)
drop-shadow(1px -1px black)
drop-shadow(-1px 1px black)
drop-shadow(
max(2px, 0.1em)
max(2px, 0.1em)
max(2px, 0.1em)
rgba(0, 0, 0, 0.5))
!important;
}
#mon {
margin: auto;
width: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
position: absolute;
z-index: 1;
}
#item {
margin: auto;
width: auto;
bottom: max(2px, 0.1em);
right: max(2px, 0.1em);
height: 35%;
position: absolute;
z-index: 2;
}
#tera {
margin: auto;
width: auto;
top: max(2px, 0.1em);
left: max(2px, 0.1em);
height: 35%;
position: absolute;
z-index: 3;
}
.fainted {
opacity: 50%;
}
</style>
</head>
<body>
<div id="content">
<img id="mon">
<img id="item">
<img id="tera">
</div>
</body>
<footer>
<script>
const urlParams = new URLSearchParams(window.location.search);
const effect = urlParams.get('effect')
const mon = urlParams.get('img');
if(mon){
const monIcon = document.getElementById("mon");
monIcon.src = `./img/pkmn/${mon}.png`
if(effect){
monIcon.classList.add(effect);
}
}
const item = urlParams.get('item');
if(item){
const itemIcon = document.getElementById("item");
itemIcon.src = `./img/items/${item}.png`
const used = urlParams.get('used');
if(used === 'true'){
itemIcon.classList.add('fainted')
}
if(effect){
itemIcon.classList.add(effect);
}
}
const tera = urlParams.get('tera');
if(tera){
const teraIcon = document.getElementById("tera");
teraIcon.src = `./img/misc/tera/${tera}.png`
if(effect){
teraIcon.classList.add(effect);
}
}
const fainted = urlParams.get('fainted');
if(fainted === 'true'){
document.getElementById('content').classList.add('fainted')
}
</script>
</footer>
</html>