home to your local SPACEGIRL 💫
arimelody.space
update prideflag.js
+62
-54
+62
-54
public/script/prideflag.js
+62
-54
public/script/prideflag.js
···
1
-
/**
2
-
* 🏳️🌈🏳️⚧️💖 pride flag 💖🏳️⚧️🏳️🌈
3
-
* made with ❤️ by ari melody, 2023
4
-
*
5
-
* web: https://arimelody.me
6
-
* source: https://github.com/mellodoot/prideflag
7
-
*/
1
+
//
2
+
// pride flag - copyright (c) 2024 ari melody
3
+
//
4
+
// this code is provided AS-IS, WITHOUT ANY WARRANTY, to be
5
+
// freely redistributed and/or modified as you please, however
6
+
// retaining this license in any redistribution.
7
+
//
8
+
// please use this flag to link to an LGBTQI+-supporting page
9
+
// of your choosing!
10
+
//
11
+
// web: https://arimelody.me
12
+
// source: https://git.arimelody.me/ari/prideflag
13
+
//
14
+
15
+
const pride_url = "https://git.arimelody.me/ari/prideflag";
8
16
9
17
const pride_flag_svg =
10
-
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
11
-
<path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
12
-
<path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
13
-
<path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
14
-
<path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
15
-
<path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
16
-
<path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
17
-
18
-
<rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
19
-
<rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
20
-
<rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
21
-
<rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
22
-
<rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
23
-
24
-
<rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
25
-
<circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
26
-
</svg>`;
18
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
19
+
<path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
20
+
<path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
21
+
<path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
22
+
<path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
23
+
<path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
24
+
<path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
25
+
26
+
<rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
27
+
<rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
28
+
<rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
29
+
<rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
30
+
<rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
31
+
32
+
<rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
33
+
<circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
34
+
</svg>`;
27
35
28
36
const pride_flag_css =
29
-
`#pride-flag svg {
30
-
position: fixed;
31
-
top: 0;
32
-
right: 0;
33
-
width: 120px;
34
-
transform-origin: 100% 0%;
35
-
transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
36
-
z-index: 8008135;
37
-
pointer-events: none;
38
-
}
39
-
#pride-flag svg:hover {
40
-
transform: scale(110%);
41
-
}
42
-
#pride-flag svg:active {
43
-
transform: scale(110%);
44
-
}
45
-
#pride-flag svg * {
46
-
pointer-events: all;
47
-
}`;
37
+
`#prideflag {
38
+
position: fixed;
39
+
top: 0;
40
+
right: 0;
41
+
width: 120px;
42
+
transform-origin: 100% 0%;
43
+
transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
44
+
z-index: 8008135;
45
+
pointer-events: none;
46
+
}
47
+
#prideflag:hover {
48
+
transform: scale(110%);
49
+
}
50
+
#prideflag:active {
51
+
transform: scale(110%);
52
+
}
53
+
#prideflag * {
54
+
pointer-events: all;
55
+
}`;
48
56
49
57
function create_pride_flag() {
50
-
const container = document.createElement("a");
51
-
container.id = "pride-flag";
52
-
container.href = "https://github.com/mellodoot/prideflag";
53
-
container.target = "_blank";
54
-
container.innerHTML = pride_flag_svg;
55
-
return container;
58
+
const flag = document.createElement("a");
59
+
flag.id = "prideflag";
60
+
flag.href = pride_url;
61
+
flag.target = "_blank";
62
+
flag.innerHTML = pride_flag_svg;
63
+
return flag;
56
64
}
57
65
58
66
function load_pride_flag_style() {
59
-
const pride_stylesheet = document.createElement('style');
60
-
pride_stylesheet.textContent = pride_flag_css;
61
-
document.head.appendChild(pride_stylesheet);
67
+
const pride_stylesheet = document.createElement('style');
68
+
pride_stylesheet.textContent = pride_flag_css;
69
+
document.head.appendChild(pride_stylesheet);
62
70
}
63
71
64
72
load_pride_flag_style();
65
-
pride_flag = create_pride_flag();
66
-
document.querySelector("main").appendChild(pride_flag);
73
+
flag = create_pride_flag();
74
+
document.body.appendChild(flag);