diff --git a/node/server/server.js b/node/server/server.js
index efd5852..510d038 100644
--- a/node/server/server.js
+++ b/node/server/server.js
@@ -74,7 +74,7 @@ function getNavi(activeName) {
}
function flagList() {
- var list = "";
+ var list = "";
for (const key in flags.allFlags) {
if (flags.allFlags.hasOwnProperty(key)) {
list += '';
@@ -167,7 +167,14 @@ app.get('/design/download', async function (req, res) {
return;
}
- gradients.changeGradients(flags.allFlags[flag]);
+ if(flag == "Eigene Farbkombination") {
+ flags.letters.forEach(letter => {
+ var color = "#" + (req.query[letter] || "FFFFFF");
+ gradients.colorLetter(letter, color, false);
+ });
+ } else {
+ gradients.changeGradients(flags.allFlags[flag]);
+ }
gradients.setShadowMode(withshadow ? "on" : "off");
if (type == "svg") {
diff --git a/node/tool/browser.js b/node/tool/browser.js
index 39b44fe..59f698f 100644
--- a/node/tool/browser.js
+++ b/node/tool/browser.js
@@ -1,7 +1,10 @@
const GradientSvg = require('./recolor.js');
const flags = require('./flags.js');
const util = require('util');
+var colorLib = require('color');
+var lastLayout = "";
+var activeColor = "#000000";
window.queer = {};
window.queer.showflag = function (flagname) {
@@ -36,8 +39,27 @@ window.queer.initFlagAnimation = function () {
window.queer.initPreviewLogo = function() {
previewLogo = new GradientSvg(window.document.getElementById("previewlogo"), window.document, window);
previewLogo.setShadowMode("off");
+ flags.letters.forEach(letter => {
+ $("#"+letter).attr("value", sessionStorage.getItem(letter) || "FFFFFF");
+ });
window.queer.flagSelected();
window.queer.layoutSelected();
+ var gs = window.document.getElementsByTagName("g");
+ for (let g of gs) {
+ if(g.getAttribute("id").startsWith("letter")) {
+ var letter = g.getAttribute("id").substring(6);
+ console.log("letter: " + letter);
+ if(letter.length == 2) {
+ g.setAttribute("onclick", "queer.colorLetter('"+ letter +"')");
+ }
+ }
+ }
+}
+
+window.queer.colorLetter = function(letter) {
+ $("#"+letter).attr("value", activeColor.substring(1));
+ sessionStorage.setItem(letter, activeColor.substring(1));
+ previewLogo.colorLetter(letter, activeColor);
}
window.queer.initArrow = function () {
@@ -71,24 +93,69 @@ window.queer.initArrow = function () {
window.queer.flagSelected = function () {
flagName = $("#flagselect :selected").val();
+ if(flagName == "Eigene Farbkombination") {
+ flags.letters.forEach(letter => {
+ var color = "#" + ($("#"+letter).val() || "FFFFFF");
+ previewLogo.colorLetter(letter, color, false);
+ });
+ $("#colors").removeClass("hidden");
+ } else {
+ previewLogo.changeGradients(flags.allFlags[flagName], false);
+ $("#colors").addClass("hidden");
+ }
shadow = $("#withshadow").is(":checked");
- previewLogo.changeGradients(flags.allFlags[flagName], false);
previewLogo.setShadowMode(shadow ? "on" : "off");
}
window.queer.layoutSelected = function () {
layoutName = $("#layoutselect :selected").val();
- console.log("Layout: " + layoutName);
- $.get("/img/shadow/" + layoutName + ".svg", function(data) {
- data.documentElement.setAttribute("id", "previewlogo");
- $("#previewlogo").replaceWith(data.documentElement);
- previewLogo = new GradientSvg(window.document.getElementById("previewlogo"), window.document, window);
-
- flagName = $("#flagselect :selected").val();
- shadow = $("#withshadow").is(":checked");
- previewLogo.changeGradients(flags.allFlags[flagName], false);
- previewLogo.setShadowMode(shadow ? "on" : "off");
- });
-
+ if(lastLayout != layoutName) {
+ lastLayout = layoutName;
+ console.log("Layout: " + layoutName);
+ $.get("/img/shadow/" + layoutName + ".svg", function(data) {
+ data.documentElement.setAttribute("id", "previewlogo");
+ $("#previewlogo").replaceWith(data.documentElement);
+ queer.initPreviewLogo();
+ });
+ }
+}
+
+window.queer.initColors = function() {
+ var x = "
";
+ for (let l = 0; l < 100; l+= 15) {
+ var color = colorLib.hsl(0,0,l);
+ id = "color" + color.hex().substring(1);
+ x += '
';
+ }
+ x += " (Gray)
";
+ $("#colors").append(x);
+
+ for (const flagKey in flags.allFlags) {
+ if (flags.allFlags.hasOwnProperty(flagKey)) {
+ const flag = flags.allFlags[flagKey];
+
+ var colors = {};
+ for (const letterKey in flag) {
+ if (flag.hasOwnProperty(letterKey)) {
+ const color = flag[letterKey];
+ colors[color] = true;
+ }
+ }
+
+ var x = "";
+ for(const color in colors) {
+ id = "color" + color.substring(1);
+ x += '
';
+ }
+ x += " ("+flagKey+")
";
+ $("#colors").append(x);
+ }
+ }
+}
+
+window.queer.activateColor = function(id) {
+ $(".cd").removeClass("active");
+ $("#" + id).addClass("active");
+ activeColor = "#" + id.substring(5);
}
\ No newline at end of file
diff --git a/node/tool/flags.js b/node/tool/flags.js
index 6914dad..6d0590b 100644
--- a/node/tool/flags.js
+++ b/node/tool/flags.js
@@ -141,6 +141,25 @@ const agenderGreen = "#CDF29F";
const kinkBlue = "#0E24C0";
const kinkRed = "#ED4024";
+const gayRed = "#CA0E26";
+const gayOrange = "#EC7408";
+const gayYellow = "#F9DA00";
+const gayGreen = "#6FB327";
+const gayBlue = "#073E85";
+const gayViolet = "#8E3371";
+const gayPink = "#E4007D";
+
+
+exports.allColors = [
+ white, black, transBlue, transRose, biPink, biViolet, biBlue, aceGrey, aceViolet, panPink, panYellow, panBlue,
+ romanticDarkGreen, romanticLightGreen, intersexYellow, nonbinaryYellow, nonbinaryViolet, genderqueerViolet,
+ genderqueerGreen, phillyBrown, genderfluidPink, genderfluidViolet, genderfluidBlue, polysexualPink, polysexualGreen,
+ polysexualBlue, lebsian1, lebsian2, lebsian3, lebsian4, lebsian5, lebsian6, lebsian7, polyamRed, polyamBlue,
+ polyamYellow, agenderGrey, agenderGreen, kinkBlue, kinkRed, gayRed, gayOrange, gayYellow, gayGreen, gayBlue, gayViolet, gayPink
+];
+
+
+exports.gay = flag7(gayRed, gayOrange, gayYellow, gayGreen, gayBlue, gayViolet, gayPink);
exports.aro = flag5(romanticDarkGreen, romanticLightGreen, white, aceGrey, black);
exports.nonbinary = flag4(nonbinaryYellow, white, nonbinaryViolet, black);
exports.genderqueer = flag3(genderqueerViolet, white, genderqueerGreen);
@@ -175,6 +194,7 @@ exports.kink = {
exports.allFlags = {
+ "Gay" : exports.gay,
"Asexuell" : exports.ace,
"Bisexuell" : exports.bi,
"Pansexuell" : exports.pan,
@@ -189,4 +209,6 @@ exports.allFlags = {
"Agender" : exports.agender,
"Lesbisch" : exports.lebsian,
"Kinky" : exports.kink
-};
\ No newline at end of file
+};
+
+exports.letters = ["Q0", "U0", "E0", "E1", "R0", "A0", "L0", "L1", "Y0", "E2", "A1", "R1"];
diff --git a/node/tool/recolor.js b/node/tool/recolor.js
index 0d1b4cc..138b53a 100644
--- a/node/tool/recolor.js
+++ b/node/tool/recolor.js
@@ -73,7 +73,23 @@ method.changeGradients = async function(flag, animate = false) {
var id = gradient.id;
if (id.length == 3) {
var letter = id.substring(0,2);
- this.colorLetter(gradient, flag[letter], animate);
+ this.colorLetterGradient(gradient, flag[letter], animate);
+ }
+ if(animate)
+ await sleep(25);
+ }
+}
+
+
+method.colorLetter = async function(letterToColor, targetColor, animate = false) {
+ for (let i = 0; i < this.defs.children.length; i++) {
+ const gradient = this.defs.children.item(i);
+ var id = gradient.id;
+ if (id.length == 3) {
+ var letter = id.substring(0,2);
+ if(letter == letterToColor) {
+ this.colorLetterGradient(gradient, targetColor, animate);
+ }
}
if(animate)
await sleep(25);
@@ -99,7 +115,7 @@ method.setShadowMode = function(mode) {
}
}
-method.colorLetter = async function(gradient, targetColor, animate = false) {
+method.colorLetterGradient = async function(gradient, targetColor, animate = false) {
var id = gradient.id;
var letter = id.substring(0,2);
var [th, ts, tl] = color(targetColor).hsl().color;
diff --git a/web/contents/design.fragment b/web/contents/design.fragment
index 9be8c7b..eb57adf 100644
--- a/web/contents/design.fragment
+++ b/web/contents/design.fragment
@@ -38,15 +38,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
Vorschau
$PREVIEWLOGO
+
+
+
Eigene Farbkombination bauen
+
Wähle unten eine Farbe aus, und klicke auf die Buchstaben um sie entsprechend einzufärben.
+
Deine Farbauswahl wird lokal gespeichert, bis du deine Browsersitzung beendest.
+
+
\ No newline at end of file
diff --git a/web/css/main.css b/web/css/main.css
index 5eab13d..67e2735 100755
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -331,6 +331,24 @@ textarea {
color: black;
}
+.cd {
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ border: 2px solid transparent;
+ margin: 2px;
+ vertical-align: bottom;
+}
+
+.cd.active {
+ border: 2px solid black;
+}
+
+.colorgroup {
+ float: left;
+ width: 45%;
+}
+
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
diff --git a/web/img/logo_orig_shadow.svg b/web/img/logo_orig_shadow.svg
index 840add1..aa5fbea 100644
--- a/web/img/logo_orig_shadow.svg
+++ b/web/img/logo_orig_shadow.svg
@@ -63,10 +63,10 @@
id="defs226">
-