diff --git a/README.md b/README.md index 29d726d..4c506b8 100644 --- a/README.md +++ b/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 - - - -``` - -...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! 🌈 diff --git a/prideflag-generator.js b/prideflag-generator.js deleted file mode 100644 index ddbf5f9..0000000 --- a/prideflag-generator.js +++ /dev/null @@ -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); \ No newline at end of file diff --git a/prideflag.js b/prideflag.js index 42fc6c9..0764c9a 100644 --- a/prideflag.js +++ b/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 = `; 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); \ No newline at end of file +flag = create_pride_flag(); +document.body.appendChild(flag);