|
| 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://www.hrw.org/topic/lgbt-rights"; |
| 16 | + |
| 17 | +const pride_flag_svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120"> |
| 18 | + <path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/> |
| 19 | + <path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/> |
| 20 | + <path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/> |
| 21 | + <path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/> |
| 22 | + <path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/> |
| 23 | + <path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/> |
| 24 | +
|
| 25 | + <rect id="black" x="60" width="60" height="60" style="fill:#010101"/> |
| 26 | + <rect id="brown" x="70" width="50" height="50" style="fill:#603814"/> |
| 27 | + <rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/> |
| 28 | + <rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/> |
| 29 | + <rect id="white" x="100" width="20" height="20" style="fill:#fff"/> |
| 30 | + |
| 31 | + <rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/> |
| 32 | + <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/> |
| 33 | + </svg>`; |
| 34 | + |
| 35 | +const pride_flag_css = `#prideflag { |
| 36 | + position: fixed; |
| 37 | + top: 0; |
| 38 | + right: 0; |
| 39 | + width: 120px; |
| 40 | + transform-origin: 100% 0%; |
| 41 | + transition: transform .5s cubic-bezier(.32,1.63,.41,1.01); |
| 42 | + z-index: 8008135; |
| 43 | + pointer-events: none; |
| 44 | + } |
| 45 | + #prideflag:hover { |
| 46 | + transform: scale(110%); |
| 47 | + } |
| 48 | + #prideflag:active { |
| 49 | + transform: scale(110%); |
| 50 | + } |
| 51 | + #prideflag * { |
| 52 | + pointer-events: all; |
| 53 | + }`; |
| 54 | + |
| 55 | +function create_pride_flag() { |
| 56 | + const flag = document.createElement("a"); |
| 57 | + flag.id = "prideflag"; |
| 58 | + flag.href = pride_url; |
| 59 | + flag.target = "_blank"; |
| 60 | + flag.innerHTML = pride_flag_svg; |
| 61 | + return flag; |
| 62 | +} |
| 63 | + |
| 64 | +function load_pride_flag_style() { |
| 65 | + const pride_stylesheet = document.createElement("style"); |
| 66 | + pride_stylesheet.textContent = pride_flag_css; |
| 67 | + document.head.appendChild(pride_stylesheet); |
| 68 | +} |
| 69 | + |
| 70 | +load_pride_flag_style(); |
| 71 | +flag = create_pride_flag(); |
| 72 | +document.body.appendChild(flag); |
0 commit comments