diff --git a/generator/static/js/templates/bottom-slogan-gradient-icon.js b/generator/static/js/templates/bottom-slogan-gradient-icon.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ba09c85ba7d41779708263c7c00e413aa79734a
--- /dev/null
+++ b/generator/static/js/templates/bottom-slogan-gradient-icon.js
@@ -0,0 +1,887 @@
+class BottomSloganGradientIcon extends Template {
+ description = "Určeno pro sociální sítě.";
+
+ changeableAttributes = [
+ "logoImage",
+ "primaryImage",
+ "primaryImagePosition",
+ "iconImage",
+ "iconText",
+ "primaryColorScheme",
+ "primaryText",
+ "nameText"
+ ];
+
+ primaryColorSchemes = [
+ "black-on-white",
+ "white-on-black"
+ ];
+
+ // Colors
+ changeableColors = [
+ "backgroundGradientColor1",
+ "backgroundGradientColor2",
+ "foregroundColor",
+ "primaryTextColor",
+ "iconColor",
+ "nameBackgroundColor",
+ "nameTextColor"
+ ];
+
+ iconImage = null;
+ iconText = "";
+
+ // Canvas
+ async redrawCanvas() {
+ if (this.redrawing) {
+ return;
+ }
+
+ this.redrawing = true;
+
+ // Background rectangle
+ let backgroundRectangleHeight = Math.ceil(this.canvas.height * 0.35);
+
+ // Foreground rectangle
+ const foregroundRectangleOffsetSides = Math.ceil(this.canvas.width * 0.1);
+ const foregroundRectanglePaddingSides = Math.ceil(this.canvas.width * 0.025);
+ const foregroundRectangleAngle = Math.ceil(this.canvas.height * 0.01);
+ const foregroundRectangleOffsetBottom = Math.ceil(this.canvas.height * 0.17);
+ const foregroundRectanglePaddingTop = Math.ceil(this.canvas.height * 0.02);
+ const foregroundRectanglePaddingTopWithNameOrDiacritics = Math.ceil(this.canvas.height * 0.02);
+ const foregroundRectanglePaddingBottom = Math.ceil(this.canvas.height * 0.05);
+
+ // Primary text
+ let primaryTextFontSize = Math.ceil(this.canvas.height * 0.09);
+ let primaryTextMaxLines = 3;
+
+ // Name text
+ let nameTextFontSize = Math.ceil(this.canvas.height * 0.03);
+ const nameTextMaxWidth = Math.ceil(this.canvas.width * 0.35);
+
+ // Name rectangle
+ const nameRectangleOffsetSide = Math.ceil(this.canvas.width * 0.025);
+ const nameRectangleOffsetTop = Math.ceil(this.canvas.height * 0.03);
+ const nameRectanglePaddingSides = Math.ceil(this.canvas.width * 0.025);
+ const nameRectanglePaddingTop = Math.ceil(this.canvas.height * 0.01);
+ const nameRectanglePaddingBottom = Math.ceil(this.canvas.height * 0.0175);
+
+ // Logo
+ const logoWidth = Math.ceil(this.canvas.width * 0.2) * this.logoImageZoom;
+ const logoOffsetTop = Math.ceil(this.canvas.height * 0.07) * ((3 - this.logoImageZoom) / 2);
+ const logoOffsetSide = Math.ceil(this.canvas.width * 0.1) * ((3 - this.logoImageZoom) / 2);
+
+ //// Icon
+ // Image
+ const iconBottomOffset = Math.ceil(this.canvas.height * 0.05);
+ const iconHeight = Math.ceil(this.canvas.width * 0.06);
+ // Text
+ const iconTextSideOffset = Math.ceil(this.canvas.width * 0.015);
+ const iconTextTopOffset = -(Math.ceil(this.canvas.height * 0.002)); // FIXME, if possible. I think this might just be the font's fault.
+ const iconTextMaxWidth = (this.canvas.width - 2 * foregroundRectangleOffsetSides) * 0.7;
+ let iconTextFontSize = Math.ceil(this.canvas.height * 0.027);
+ const iconTextFontLinePadding = Math.ceil(this.canvas.height * 0.003);
+ const iconTextMaxLines = 2;
+
+ // Clear the canvas
+ this.context.clearRect(
+ 0, 0,
+ this.canvas.width, this.canvas.height
+ );
+
+ // Set image
+ if (this.primaryImage !== null) {
+ // https://github.com/DonkeyDushan/piratilol/blob/main/src/js/index.js
+ // Thanks to DonkeyDushan, the guy who made the joke 2021 campaign generator :D
+
+ const imageScaleX = this.canvas.width / this.primaryImage.width;
+ const imageScaleY = this.canvas.height / this.primaryImage.height;
+
+ const imageScale = Math.max(imageScaleX, imageScaleY) * this.primaryImageZoom;
+
+ // https://stackoverflow.com/a/8529655
+ // Thanks to alex!
+ this.context.setTransform(
+ imageScale,
+ 0, 0,
+ imageScale,
+ (this.canvas.width - this.primaryImage.width * imageScale) / 2 + this.primaryImageX * this.primaryImageZoom,
+ (this.canvas.height - this.primaryImage.height * imageScale) / 2 + this.primaryImageY * this.primaryImageZoom,
+ );
+ this.context.drawImage(
+ this.primaryImage,
+ 0, 0
+ );
+ this.context.setTransform(); // Reset transformation
+ }
+
+ // Create primary text
+ const primaryTextMaxWidth = (
+ this.canvas.width
+ - foregroundRectangleOffsetSides * 2
+ - foregroundRectanglePaddingSides * 2
+ );
+
+ let primaryTextLines = null;
+ const originalPrimaryTextFontSize = primaryTextFontSize;
+
+ do {
+ this.context.font = `${this.primaryFontStyle} ${primaryTextFontSize}px ${this.primaryFont}`;
+
+ primaryTextLines = splitStringIntoLines(
+ this.context,
+ this.primaryText,
+ primaryTextMaxWidth,
+ primaryTextMaxLines,
+ true
+ );
+
+ if (
+ primaryTextLines.length > primaryTextMaxLines
+ && (
+ primaryTextLines.length * primaryTextFontSize
+ > primaryTextMaxLines * originalPrimaryTextFontSize
+ )
+ ) {
+ primaryTextFontSize -= 2;
+ }
+ } while (
+ primaryTextLines.length > primaryTextMaxLines
+ && (
+ primaryTextLines.length * primaryTextFontSize
+ > primaryTextMaxLines * originalPrimaryTextFontSize
+ )
+ );
+
+ const firstPrimaryLine = primaryTextLines[0].toString();
+
+ // Create background rectangle
+ if (primaryTextLines.length === 1) {
+ backgroundRectangleHeight = Math.ceil(backgroundRectangleHeight / 1.3);
+ }
+
+ // Helper canvas
+ const backgroundCanvas = document.createElement("canvas");
+ backgroundCanvas.width = this.canvas.width;
+ backgroundCanvas.height = backgroundRectangleHeight;
+
+ const backgroundCanvasContext = backgroundCanvas.getContext("2d");
+
+ const backgroundGradient = backgroundCanvasContext.createLinearGradient(
+ 0, backgroundCanvas.height,
+ backgroundCanvas.width, 0
+ );
+ backgroundGradient.addColorStop(0, this.backgroundGradientColor1);
+ backgroundGradient.addColorStop(1, this.backgroundGradientColor2);
+
+ backgroundCanvasContext.fillStyle = backgroundGradient;
+ backgroundCanvasContext.fillRect(
+ 0, 0,
+ backgroundCanvas.width, backgroundCanvas.height
+ );
+
+ const backgroundTransparencyGradient = backgroundCanvasContext.createLinearGradient(
+ backgroundCanvas.width / 2, 0,
+ backgroundCanvas.width / 2, backgroundCanvas.height * 1.35
+ );
+ backgroundTransparencyGradient.addColorStop(0, "rgba(0, 0, 0, 1)");
+ backgroundTransparencyGradient.addColorStop(1, "rgba(0, 0, 0, 0)");
+
+ backgroundCanvasContext.fillStyle = backgroundTransparencyGradient;
+ backgroundCanvasContext.globalCompositeOperation = "xor";
+ backgroundCanvasContext.fillRect(
+ 0, 0,
+ backgroundCanvas.width, backgroundCanvas.height
+ );
+
+ this.context.drawImage(
+ backgroundCanvas,
+ 0, this.canvas.height - backgroundCanvas.height,
+ );
+
+ // Create foreground rectangle
+ if (this.primaryText !== "") {
+ const foregroundRectangleHeight = (
+ foregroundRectanglePaddingBottom
+ + primaryTextLines.length * primaryTextFontSize
+ + foregroundRectanglePaddingTop
+ + (
+ (
+ this.nameText !== ""
+ || (
+ firstPrimaryLine.replace(/[a-zA-Z0-9À-ž]+/g, "").length
+ !== firstPrimaryLine.replace(/[a-zA-Z0-9]+/g, "").length
+ )
+ ) ?
+ foregroundRectanglePaddingTopWithNameOrDiacritics : 0
+ )
+ );
+
+ this.context.fillStyle = this.foregroundColor;
+
+ this.context.beginPath();
+ this.context.moveTo(
+ foregroundRectangleOffsetSides,
+ this.canvas.height - foregroundRectangleOffsetBottom
+ );
+ this.context.lineTo(
+ this.canvas.width - foregroundRectangleOffsetSides,
+ this.canvas.height - foregroundRectangleOffsetBottom - foregroundRectangleAngle
+ );
+ this.context.lineTo(
+ this.canvas.width - foregroundRectangleOffsetSides,
+ this.canvas.height - foregroundRectangleOffsetBottom - foregroundRectangleHeight - foregroundRectangleAngle
+ );
+ this.context.lineTo(
+ foregroundRectangleOffsetSides,
+ this.canvas.height - foregroundRectangleOffsetBottom - foregroundRectangleHeight
+ );
+ this.context.closePath();
+
+ this.context.fill();
+
+ this.context.font = `${this.primaryFontStyle} ${primaryTextFontSize}px ${this.primaryFont}`;
+
+ let currentPrimaryLineY = (
+ this.canvas.height
+ - foregroundRectangleOffsetBottom
+ - foregroundRectanglePaddingBottom
+ );
+ this.context.fillStyle = this.primaryTextColor;
+ this.context.textAlign = "center";
+
+ for (const line of primaryTextLines.reverse()) {
+ this.context.fillText(
+ line.join(" "),
+ this.canvas.width / 2,
+ currentPrimaryLineY
+ );
+
+ currentPrimaryLineY -= primaryTextFontSize;
+ }
+
+ this.context.textAlign = "left";
+
+ // Create name text
+ if (this.nameText !== "") {
+ do {
+ this.context.font = `${nameTextFontSize}px 'Roboto Condensed'`;
+
+ if (
+ this.context.measureText(this.nameText).width
+ > nameTextMaxWidth
+ ) {
+ nameTextFontSize -= 2;
+ }
+ } while (this.context.measureText(this.nameText).width > nameTextMaxWidth);
+
+ this.context.fillStyle = this.nameBackgroundColor;
+ this.context.fillRect(
+ (
+ foregroundRectangleOffsetSides
+ + nameRectangleOffsetSide
+ ), (
+ this.canvas.height
+ - foregroundRectangleHeight
+ - foregroundRectangleOffsetBottom
+ - nameRectanglePaddingBottom
+ - nameRectanglePaddingTop
+ - nameTextFontSize
+ + nameRectangleOffsetTop
+ ),
+ (
+ nameRectanglePaddingSides * 2
+ + this.context.measureText(this.nameText).width
+ ),
+ (
+ nameRectanglePaddingBottom
+ + nameRectanglePaddingTop
+ + nameTextFontSize
+ )
+ );
+
+ this.context.fillStyle = this.nameTextColor;
+
+ this.context.fillText(
+ this.nameText,
+ (
+ foregroundRectangleOffsetSides
+ + nameRectangleOffsetSide
+ + nameRectanglePaddingSides
+ ),
+ (
+ this.canvas.height
+ - foregroundRectangleHeight
+ - foregroundRectangleOffsetBottom
+ - nameRectanglePaddingBottom
+ + nameRectangleOffsetTop
+ )
+ );
+ }
+ }
+
+ const classRef = this;
+
+ // Create logo image
+ function drawLogoImage(image) {
+ classRef.context.drawImage(
+ image,
+ (
+ classRef.canvas.width
+ - logoWidth
+ - logoOffsetSide
+ ),
+ logoOffsetTop,
+ logoWidth, image.height * (logoWidth / image.width)
+ );
+ }
+
+ if (this.logoImage === null) {
+ const logoImageLoadPromise = new Promise(
+ resolve => {
+ let logoImage = new Image();
+
+ logoImage.onload = function() {
+ drawLogoImage(this);
+
+ resolve();
+ }
+
+ // See if we're using the light or dark version
+ const logoBackgroundRGB = hexToRgb(
+ blendColors(
+ this.backgroundGradientColor1,
+ this.backgroundGradientColor2,
+ 0.5
+ )
+ );
+ const backgroundLightness = (
+ 0.2126 * logoBackgroundRGB.r
+ + 0.7152 * logoBackgroundRGB.g
+ + 0.0722 * logoBackgroundRGB.b
+ );
+
+ const useLightLogo = (backgroundLightness < 207);
+
+ if (useLightLogo) {
+ logoImage.src = classRef.lightLogoDefaultSource;
+ } else {
+ logoImage.src = classRef.darkLogoDefaultSource;
+ }
+ }
+ );
+
+ await logoImageLoadPromise;
+ } else {
+ drawLogoImage(this.logoImage);
+ }
+
+ if (this.requesterText !== "") {
+ // https://newspaint.wordpress.com/2014/05/22/writing-rotated-text-on-a-javascript-canvas/
+ // Thanks to newspaint!
+
+ this.context.save();
+
+ this.context.translate(this.canvas.width - 1, 0);
+
+ this.context.rotate(3 * Math.PI / 2);
+
+ let requesterFontSize = Math.ceil(this.canvas.width * 0.015);
+
+ do {
+ this.context.font = `${this.primaryFontStyle} ${requesterFontSize}px ${this.primaryFont}`;
+
+ if (
+ this.context.measureText(this.requesterText).width
+ > this.canvas.height * 0.97
+ ) {
+ requesterFontSize -= 2;
+ this.context.font = `${this.primaryFontStyle} ${requesterFontSize}px ${this.primaryFont}`;
+ }
+ } while (
+ this.context.measureText(this.requesterText).width
+ > this.canvas.height * 0.97
+ );
+
+ this.context.fillStyle = this.requesterTextColor;
+
+ this.context.textAlign = "left";
+
+ this.context.globalAlpha = 0.6;
+ this.context.fillText(
+ this.requesterText,
+ -this.canvas.height * 0.985, -this.canvas.width * 0.985 + requesterFontSize
+ );
+ this.context.globalAlpha = 1;
+
+ this.context.restore();
+ }
+
+ // Draw icon
+ if (this.iconImage !== null) {
+ let iconTextLines = null;
+ const originalIconTextFontSize = iconTextFontSize;
+
+ do {
+ classRef.context.font = `${iconTextFontSize}px 'Roboto Condensed'`;
+
+ iconTextLines = splitStringIntoLines(
+ classRef.context,
+ classRef.iconText,
+ iconTextMaxWidth,
+ iconTextMaxLines,
+ true
+ );
+
+ if (
+ iconTextLines.length > iconTextMaxLines
+ && (
+ iconTextLines.length * iconTextFontSize
+ > iconTextMaxLines * originalIconTextFontSize
+ )
+ ) {
+ iconTextFontSize -= 2;
+ }
+ } while (
+ iconTextLines.length > iconTextMaxLines
+ && (
+ iconTextLines.length * iconTextFontSize
+ > iconTextMaxLines * originalIconTextFontSize
+ )
+ );
+
+ let currentIconLineY = (
+ this.canvas.height
+ - iconBottomOffset
+ - iconHeight
+ + iconTextFontSize
+ + iconTextTopOffset
+ );
+
+ this.context.textAlign = "left";
+
+ for (const line of iconTextLines) {
+
+ }
+ }
+
+ this.finalDrawHook();
+ this.stickerDrawHook();
+
+ this.redrawing = false;
+ }
+
+ // Icon
+ async setIconText(text, skipRedraw = false) {
+ this.iconText = text;
+
+ if (!skipRedraw) {
+ await this.redrawCanvas();
+ }
+ }
+
+ async setIconImageFromInput(imageInput, skipRedraw = false) {
+ if (imageInput.files.length == 0) {
+ return;
+ }
+
+ const readPromise = new Promise(
+ resolve => {
+ const fileReader = new FileReader();
+
+ let classRef = this;
+
+ fileReader.onloadend = function(event) {
+ classRef.iconImage = new Image();
+
+ classRef.iconImage.onload = function() {
+ if (!skipRedraw) {
+ classRef.redrawCanvas();
+ }
+
+ resolve();
+ }
+
+ classRef.iconImage.src = event.target.result;
+ }
+
+ fileReader.readAsDataURL(imageInput.files[0]);
+ }
+ );
+
+ await readPromise;
+ }
+
+ // Color schemes
+ async setPrimaryColorScheme(scheme, skipRedraw = false) {
+ switch (scheme) {
+ case "black-on-white":
+ this.backgroundGradientColor1 = "#000000";
+ this.backgroundGradientColor2 = "#999999";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#000000";
+ this.nameTextColor = "#ffffff";
+
+ break;
+ case "white-on-black":
+ this.backgroundGradientColor1 = "#ffffff";
+ this.backgroundGradientColor2 = "#999999";
+
+ this.foregroundColor = "#000000";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#000000";
+
+ this.nameBackgroundColor = "#ffffff";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "forum-black-on-white":
+ this.backgroundGradientColor1 = "#962a51";
+ this.backgroundGradientColor2 = "#000000";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#000000";
+ this.nameTextColor = "#ffffff";
+
+ break;
+ case "forum-white-on-purple":
+ this.backgroundGradientColor1 = "#962a51";
+ this.backgroundGradientColor2 = "#ffffff";
+
+ this.foregroundColor = "#000000";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#000000";
+
+ this.nameBackgroundColor = "#ffffff";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "zeleni-volary-bystrc-most-black-on-white":
+ this.backgroundGradientColor1 = "#00ad43";
+ this.backgroundGradientColor2 = "#000000";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#000000";
+ this.nameTextColor = "#ffffff";
+
+ break;
+ case "zeleni-volary-bystrc-most-white-on-green":
+ this.backgroundGradientColor1 = "#00ad43";
+ this.backgroundGradientColor2 = "#ffffff";
+
+ this.foregroundColor = "#000000";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#000000";
+
+ this.nameBackgroundColor = "#ffffff";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "spolecne-s-piraty-black-on-white":
+ this.backgroundGradientColor1 = "#21274e";
+ this.backgroundGradientColor2 = "#9796ca";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#9796ca";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "spolecne-s-piraty-white-on-blue":
+ this.backgroundGradientColor1 = "#ffffff";
+ this.backgroundGradientColor2 = "#ffffff";
+
+ this.foregroundColor = "#21274e";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#21274e";
+
+ this.nameBackgroundColor = "#9796ca";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "louny-spolecne-black-on-white":
+ this.backgroundGradientColor1 = "#3e2a5b";
+ this.backgroundGradientColor2 = "#e2d7a9";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#3e2a5b";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#e2d7a9";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "louny-spolecne-white-on-purple":
+ this.backgroundGradientColor1 = "#9796ca";
+ this.backgroundGradientColor2 = "#e2d7a9";
+
+ this.foregroundColor = "#3e2a5b";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#3e2a5b";
+
+ this.nameBackgroundColor = "#ffffff";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "litomerice-blue-on-white":
+ this.backgroundGradientColor1 = "#123172";
+ this.backgroundGradientColor2 = "#cccccc";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#123172";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#cccccc";
+ this.nameTextColor = "#123172";
+
+ break;
+ case "litomerice-white-on-blue":
+ this.backgroundGradientColor1 = "#ffffff";
+ this.backgroundGradientColor2 = "#cccccc";
+
+ this.foregroundColor = "#123172";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#123172";
+
+ this.nameBackgroundColor = "#cccccc";
+ this.nameTextColor = "#123172";
+
+ break;
+ case "stranane-gray-on-yellow":
+ this.backgroundGradientColor1 = "#ffffff";
+ this.backgroundGradientColor2 = "#4d4d4d";
+
+ this.foregroundColor = "#ffd500";
+ this.primaryTextColor = "#4d4d4d";
+
+ this.iconColor = "#ffd500";
+
+ this.nameBackgroundColor = "#4d4d4d";
+ this.nameTextColor = "#ffffff";
+
+ break;
+ case "stranane-yellow-on-white":
+ this.backgroundGradientColor1 = "#ffd500";
+ this.backgroundGradientColor2 = "#4d4d4d";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#4d4d4d";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#4d4d4d";
+ this.nameTextColor = "#ffffff";
+
+ break;
+ case "stranane-white-on-yellow":
+ this.backgroundGradientColor1 = "#ffd500";
+ this.backgroundGradientColor2 = "#ffd500";
+
+ this.foregroundColor = "#4d4d4d";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#4d4d4d";
+
+ this.nameBackgroundColor = "#ffffff";
+ this.nameTextColor = "#4d4d4d";
+
+ break;
+ case "prusanky-black-on-yellow":
+ this.backgroundGradientColor1 = "#000000";
+ this.backgroundGradientColor2 = "#ffffff";
+
+ this.foregroundColor = "#ffd500";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#ffd500";
+
+ this.nameBackgroundColor = "#000000";
+ this.nameTextColor = "#ffffff";
+
+ break;
+ case "prusanky-yellow-on-white":
+ this.backgroundGradientColor1 = "#ffd500";
+ this.backgroundGradientColor2 = "#000000";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#000000";
+ this.nameTextColor = "#ffffff";
+
+ break;
+ case "prusanky-white-on-yellow":
+ this.backgroundGradientColor1 = "#ffd500";
+ this.backgroundGradientColor2 = "#ffffff";
+
+ this.foregroundColor = "#000000";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#000000";
+
+ this.nameBackgroundColor = "#ffffff";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "ujezd-green-on-white":
+ this.backgroundGradientColor1 = "#8ed4a3";
+ this.backgroundGradientColor2 = "#000000";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#ffdd55";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "ujezd-white-on-green":
+ this.backgroundGradientColor1 = "#000000";
+ this.backgroundGradientColor2 = "#ffffff";
+
+ this.foregroundColor = "#8ed4a3";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#8ed4a3";
+
+ this.nameBackgroundColor = "#ffdd55";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "cssd-red-on-black":
+ this.backgroundGradientColor1 = "#e63812";
+ this.backgroundGradientColor2 = "#ffffff";
+
+ this.foregroundColor = "#000000";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#000000";
+
+ this.nameBackgroundColor = "#ffffff";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "cssd-black-on-red":
+ this.backgroundGradientColor1 = "#000000";
+ this.backgroundGradientColor2 = "#e63812";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#000000";
+ this.nameTextColor = "#ffffff";
+
+ break;
+ case "jilemnice-purple-on-black":
+ this.backgroundGradientColor1 = "#6e1646";
+ this.backgroundGradientColor2 = "#000000";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#000000";
+ this.nameTextColor = "#ffffff";
+
+ break;
+ case "jilemnice-black-on-purple":
+ this.backgroundGradientColor1 = "#000000";
+ this.backgroundGradientColor2 = "#ffffff";
+
+ this.foregroundColor = "#6e1646";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#6e1646";
+
+ this.nameBackgroundColor = "#ffffff";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "novarole-white-on-green":
+ this.backgroundGradientColor1 = "#a9ce2d";
+ this.backgroundGradientColor2 = "#000000";
+
+ this.foregroundColor = "#ffffff";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#ffffff";
+
+ this.nameBackgroundColor = "#a9ce2d";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "novarole-green-on-white":
+ this.backgroundGradientColor1 = "#a9ce2d";
+ this.backgroundGradientColor2 = "#ffffff";
+
+ this.foregroundColor = "#000000";
+ this.primaryTextColor = "#ffffff";
+
+ this.iconColor = "#000000";
+
+ this.nameBackgroundColor = "#ffffff";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "novarole-green-on-black":
+ this.backgroundGradientColor1 = "#000000";
+ this.backgroundGradientColor2 = "#ffffff";
+
+ this.foregroundColor = "#a9ce2d";
+ this.primaryTextColor = "#000000";
+
+ this.iconColor = "#a9ce2d";
+
+ this.nameBackgroundColor = "#ffffff";
+ this.nameTextColor = "#000000";
+
+ break;
+ case "zeleni-melnik-yellow-name-rect":
+ await this.setPrimaryColorScheme("white-on-black", true);
+
+ this.nameBackgroundColor = "#fde119";
+ this.nameTextColor = "#000000";
+
+ break;
+ default:
+ throw new Error("This scheme does not exist.");
+ break;
+ }
+
+ this.requesterTextColor = this.primaryTextColor;
+
+ if (!skipRedraw) {
+ await this.redrawCanvas();
+ }
+ }
+}
diff --git a/generator/static/js/ui.js b/generator/static/js/ui.js
index 3743692f854e5ffd6b708ef8ae9c6398ed8f09e6..5a68911973cb5a287c19c7866a6cca6ded24b2b8 100644
--- a/generator/static/js/ui.js
+++ b/generator/static/js/ui.js
@@ -3,6 +3,7 @@ var template = null;
const templateTypes = {
"bottom-slogan": BottomSloganTemplate,
"bottom-slogan-gradient": BottomSloganGradient,
+ "bottom-slogan-gradient-icon": BottomSloganGradientIcon,
"bottom-slogan-gradient-vertical-logo": BottomSloganGradientVerticalLogo,
"bottom-slogan-person": BottomSloganPerson,
"bottom-slogan-quote": BottomSloganQuote,
diff --git a/generator/templates/generator.html b/generator/templates/generator.html
index b4073532632070226933456fbf8844ead773c550..412da90344d89b92cfcd45182f27eaedb7ea3281 100644
--- a/generator/templates/generator.html
+++ b/generator/templates/generator.html
@@ -47,6 +47,10 @@
type="text/javascript"
src="{{ url_for('static', filename='js/templates/bottom-slogan-gradient.js') }}"
></script>
+ <script
+ type="text/javascript"
+ src="{{ url_for('static', filename='js/templates/bottom-slogan-gradient-icon.js') }}"
+ ></script>
<script
type="text/javascript"
src="{{ url_for('static', filename='js/templates/bottom-slogan-gradient-vertical-logo.js') }}"
@@ -492,6 +496,10 @@
data-image-source="static/images/examples/bottom-slogan-gradient.png"
data-template-type="bottom-slogan-gradient"
>Velký spodní slogan, gradient na pozadí</option>
+ <option
+ data-image-source="static/images/examples/bottom-slogan-gradient-icon.png"
+ data-template-type="bottom-slogan-gradient-icon"
+ >Velký spodní slogan, gradient na pozadí, ikona</option>
<option
data-image-source="static/images/examples/bottom-slogan-person.png"
data-template-type="bottom-slogan-person"