updated to arimelody.me
This commit is contained in:
parent
0498a68f90
commit
9ad5e3c84b
GPG key ID:
CF99829C92678188
14
README.md
14
README.md
|
|
@ -1,6 +1,6 @@
|
|||
# progressive pride flag! 🌈
|
||||
|
||||
## made with ❤ by mellodoot
|
||||
## made with ❤ by ari melody
|
||||
|
||||
a lovely little pride flag made in svg, loaded with js, and optimised to be nice and lightweight!
|
||||
|
||||
|
|
@ -15,18 +15,10 @@ this flag currently represents:
|
|||
- trans pride! 🏳️⚧️
|
||||
- intersex! ♂️ ♀️
|
||||
|
||||
this flag is currently in use over at my own website, [mellodoot.com](https://www.mellodoot.com)! feel free to check it out if you'd like to see it in action!
|
||||
this flag is currently in use over at my own website, [arimelody.me](https://arimelody.me)! feel free to check it out if you'd like to see it in action!
|
||||
|
||||
## how do I use this on my own website?
|
||||
|
||||
simple! just slap this code into your html document, and the js file will be automagically loaded into your site, generating your flag!
|
||||
|
||||
```html
|
||||
<script type="text/javascript" src="https://www.mellodoot.com/js/pridetriangle.js" defer></script>
|
||||
<!-- in case this goes down, try the below example! -->
|
||||
<script type="text/javascript" src="https://github.com/mellodoot/prideflag/blob/main/prideflag.js" defer></script>
|
||||
```
|
||||
|
||||
...or copy the code from `prideflag.js` and drop it into your own self-hosted file. up to you!
|
||||
simple! just slap [prideflag.js](prideflag.js) onto your website, and the js file will automagically generate your flag on page load!
|
||||
|
||||
have fun spreading the gay! 🌈
|
||||
|
|
|
|||
|
|
@ -1,143 +0,0 @@
|
|||
/**
|
||||
* 🏳️🌈🏳️⚧️💖 pride flag 💖🏳️⚧️🏳️🌈
|
||||
* made with ❤️ by mellodoot, 2023
|
||||
*
|
||||
* an alternate, insanely over-engineered version of prideflag.js
|
||||
* which generates all required svg elements at runtime.
|
||||
*
|
||||
* given the svg doesn't exactly change however, this turned
|
||||
* out to be wholly unnecessary.
|
||||
*
|
||||
* neat proof of concept, though!
|
||||
*/
|
||||
|
||||
/**
|
||||
* Creates an SVG path using the given parameters.
|
||||
* @param {string} id The SVG `id` tag to give the path element.
|
||||
* @param {string} d An SVG draw path.
|
||||
* @param {string} fill A fill colour to apply within an included `style` tag.
|
||||
* @returns An SVG path.
|
||||
*/
|
||||
function create_path(id, d, fill) {
|
||||
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||
path.setAttribute('id', id);
|
||||
path.setAttribute('d', d);
|
||||
path.setAttribute('style', `fill:${fill}`);
|
||||
return path;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an SVG rectangle using the given parameters.
|
||||
* @param {string} id The SVG `id` tag to give the rectangle element.
|
||||
* @param {number} x The X coordinate of the rectangle.
|
||||
* @param {number} y The Y coordinate of the rectangle.
|
||||
* @param {number} width The width of the rectangle.
|
||||
* @param {number} height The height of the rectangle.
|
||||
* @param {string} fill A fill colour to apply within an included `style` tag.
|
||||
* @returns An SVG rectangle.
|
||||
*/
|
||||
function create_rect(id, x, y, width, height, fill) {
|
||||
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||
rect.setAttribute('id', id);
|
||||
rect.setAttribute('x', x);
|
||||
rect.setAttribute('y', y);
|
||||
rect.setAttribute('width', width);
|
||||
rect.setAttribute('height', height);
|
||||
rect.setAttribute('style', `fill:${fill}`);
|
||||
return rect;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an SVG circle using the given parameters.
|
||||
* @param {string} id The SVG `id` tag to give the circle element.
|
||||
* @param {number} x The X coordinate of the circle.
|
||||
* @param {number} y The Y coordinate of the circle.
|
||||
* @param {number} radius The radius of the circle.
|
||||
* @param {string} stroke_colour The stroke colour of the rectangle.
|
||||
* @param {number} stroke_width The stroke width of the rectangle.
|
||||
* @param {string} fill A fill colour to apply within an included `style` tag.
|
||||
* @returns An SVG rectangle.
|
||||
*/
|
||||
function create_circle(id, x, y, radius, stroke_colour, stroke_width, fill) {
|
||||
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
|
||||
circle.setAttribute('id', id);
|
||||
circle.setAttribute('cx', x);
|
||||
circle.setAttribute('cy', y);
|
||||
circle.setAttribute('r', radius);
|
||||
circle.setAttribute('stroke', stroke_colour);
|
||||
circle.setAttribute('stroke-width', stroke_width);
|
||||
circle.setAttribute('fill', fill);
|
||||
return circle;
|
||||
}
|
||||
|
||||
/**
|
||||
* Uses the included SVG generation methods to create a complete
|
||||
* pride flag SVG element.
|
||||
* @returns An SVG pride flag.
|
||||
*/
|
||||
function create_pride_flag_svg() {
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svg.setAttribute("viewBox", "0 0 120 120");
|
||||
|
||||
const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
|
||||
title.textContent = "Progressive Pride Flag";
|
||||
svg.appendChild(title);
|
||||
|
||||
svg.appendChild(create_path("red", "M40,0 H0 L20,20 Z", "#d20605"));
|
||||
svg.appendChild(create_path("orange", "M80,0 H40 L20,20 L40,40 Z", "#ef9c00"));
|
||||
svg.appendChild(create_path("yellow", "M120,0 H80 L40,40 L60,60 Z", "#e5fe02"));
|
||||
svg.appendChild(create_path("green", "M120,40 V0 L60,60 L80,80 Z", "#09be01"));
|
||||
svg.appendChild(create_path("blue", "M120,80 V40 L80,80 L100,100 Z", "#081a9a"));
|
||||
svg.appendChild(create_path("purple", "M120,80 L100,100 L120,120 Z", "#76008a"));
|
||||
|
||||
svg.appendChild(create_rect("black", "60", "0", "60", "60", "#010101"));
|
||||
svg.appendChild(create_rect("brown", "70", "0", "50", "50", "#603814"));
|
||||
svg.appendChild(create_rect("lightblue", "80", "0", "40", "40", "#73d6ed"));
|
||||
svg.appendChild(create_rect("pink", "90", "0", "30", "30", "#ffafc8"));
|
||||
svg.appendChild(create_rect("white", "100", "0", "20", "20", "#ffffff"));
|
||||
|
||||
svg.appendChild(create_rect("intyellow", "110", "0", "10", "10", "#fed800"));
|
||||
svg.appendChild(create_circle("intpurple", "120", "0", "5", "#7800ab", "2", "none"));
|
||||
|
||||
return svg;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns A completed pride flag with link and animations.
|
||||
*/
|
||||
function create_pride_flag() {
|
||||
const link = document.createElement("a");
|
||||
link.id = "pride-triangle";
|
||||
link.href = "https://github.com/mellodoot/prideflag";
|
||||
link.target = "_blank";
|
||||
|
||||
const triangle = create_pride_flag_svg();
|
||||
triangle.style.position = "fixed";
|
||||
triangle.style.top = "0";
|
||||
triangle.style.right = "0";
|
||||
triangle.style.width = "120px";
|
||||
triangle.style.transformOrigin = "100% 0%";
|
||||
triangle.style.transition = "transform .5s cubic-bezier(.32,1.63,.41,1.01)";
|
||||
triangle.style.zIndex = "100";
|
||||
|
||||
triangle.onmouseenter = function () {
|
||||
this.style.transform = "scale(110%)";
|
||||
};
|
||||
triangle.onmouseleave = function () {
|
||||
this.style.transform = "initial";
|
||||
};
|
||||
|
||||
triangle.onmousedown = function () {
|
||||
this.style.transform = "scale(90%)";
|
||||
};
|
||||
triangle.onmouseup = function () {
|
||||
this.style.transform = "initial";
|
||||
};
|
||||
|
||||
link.appendChild(triangle);
|
||||
|
||||
return link;
|
||||
}
|
||||
|
||||
const triangle = create_pride_flag();
|
||||
document.body.appendChild(triangle);
|
||||
30
prideflag.js
30
prideflag.js
|
|
@ -1,9 +1,9 @@
|
|||
/**
|
||||
* 🏳️🌈🏳️⚧️💖 pride flag 💖🏳️⚧️🏳️🌈
|
||||
* made with ❤️ by mellodoot, 2023
|
||||
* made with ❤️ by ari melody, 2024
|
||||
*
|
||||
* web: https://mellodoot.com
|
||||
* source: https://github.com/mellodoot/prideflag
|
||||
* web: https://arimelody.me
|
||||
* source: https://git.arimelody.me/ari/prideflag
|
||||
*/
|
||||
|
||||
const pride_flag_svg =
|
||||
|
|
@ -26,7 +26,7 @@ const pride_flag_svg =
|
|||
</svg>`;
|
||||
|
||||
const pride_flag_css =
|
||||
`#pride-flag svg {
|
||||
`#prideflag svg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -36,23 +36,23 @@ const pride_flag_css =
|
|||
z-index: 8008135;
|
||||
pointer-events: none;
|
||||
}
|
||||
#pride-flag svg:hover {
|
||||
#prideflag svg:hover {
|
||||
transform: scale(110%);
|
||||
}
|
||||
#pride-flag svg:active {
|
||||
#prideflag svg:active {
|
||||
transform: scale(110%);
|
||||
}
|
||||
#pride-flag svg * {
|
||||
#prideflag svg * {
|
||||
pointer-events: all;
|
||||
}`;
|
||||
|
||||
function create_pride_flag() {
|
||||
const container = document.createElement("a");
|
||||
container.id = "pride-flag";
|
||||
container.href = "https://github.com/mellodoot/prideflag";
|
||||
container.target = "_blank";
|
||||
container.innerHTML = pride_flag_svg;
|
||||
return container;
|
||||
const flag = document.createElement("a");
|
||||
flag.id = "prideflag";
|
||||
flag.href = "https://git.arimelody.me/ari/prideflag";
|
||||
flag.target = "_blank";
|
||||
flag.innerHTML = pride_flag_svg;
|
||||
return flag;
|
||||
}
|
||||
|
||||
function load_pride_flag_style() {
|
||||
|
|
@ -62,5 +62,5 @@ function load_pride_flag_style() {
|
|||
}
|
||||
|
||||
load_pride_flag_style();
|
||||
pride_flag = create_pride_flag();
|
||||
document.body.appendChild(pride_flag);
|
||||
flag = create_pride_flag();
|
||||
document.body.appendChild(flag);
|
||||
|
|
|
|||
Loading…
Reference in a new issue