Description
- adding gradient color picker
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. First, add a Text Block with text: ##gradient-color-picker
#1.2. Hover on Page where you use Text > Click Gear icon
#1.3. Click Advanced > Paste this code
- If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1
<!-- 07.26c31v6 Gradient Color Picker -->
<script>
window.GradientPickerConfig = {
marker: "##gradient-color-picker",
angle: 45,
randomOnLoad: true,
color1: "#ff6b6b",
color2: "#4ecdc4",
showCode: true,
showCopyButton: true,
copyLabel: "Copy CSS",
copiedLabel: "Copied!",
previewHeight: "160px",
swatchWidth: "120px",
swatchHeight: "80px",
swatchRadius: "20px",
swatchGap: "15px",
containerMaxWidth: "500px",
containerBackground: "transparent",
containerRadius: "10px",
containerPadding: "0px"
};
</script>
<script>
(function () {
var cfg = window.GradientPickerConfig;
if (!cfg) return;
var STYLE_ID = "gcp-styles";
var PREFIX = "gcp";
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
"." + PREFIX + "-container{max-width:" + cfg.containerMaxWidth + ";margin:0 auto;text-align:center;background:" + cfg.containerBackground + ";border-radius:" + cfg.containerRadius + ";padding:" + cfg.containerPadding + ";box-sizing:border-box;}" +
"." + PREFIX + "-heading{margin:0 0 20px;font-size:26px;font-weight:600;line-height:1.2;}" +
"." + PREFIX + "-preview{width:100%;height:" + cfg.previewHeight + ";border-radius:" + cfg.containerRadius + ";margin-bottom:20px;}" +
"." + PREFIX + "-colors{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:" + cfg.swatchGap + ";}" +
"." + PREFIX + "-swatch{position:relative;display:inline-block;width:" + cfg.swatchWidth + ";height:" + cfg.swatchHeight + ";border-radius:" + cfg.swatchRadius + ";cursor:pointer;overflow:hidden;}" +
"." + PREFIX + "-swatch input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer;}" +
"." + PREFIX + "-code{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}" +
"." + PREFIX + "-code code{font-family:monospace;font-size:14px;word-break:break-all;}" +
"." + PREFIX + "-copy{cursor:pointer;border:1px solid currentColor;background:transparent;color:inherit;border-radius:6px;padding:6px 14px;font:inherit;font-size:13px;line-height:1;}";
var style = document.createElement("style");
style.id = STYLE_ID;
style.textContent = css;
(document.head || document.documentElement).appendChild(style);
}
function randomHex() {
var n = Math.floor(Math.random() * 0x1000000);
return "#" + n.toString(16).padStart(6, "0");
}
function normalizeHex(v, fallback) {
if (typeof v === "string" && /^#[0-9a-fA-F]{6}$/.test(v)) return v.toLowerCase();
if (typeof v === "string" && /^#[0-9a-fA-F]{3}$/.test(v)) {
return ("#" + v[1] + v[1] + v[2] + v[2] + v[3] + v[3]).toLowerCase();
}
return fallback;
}
function gradientString(c1, c2) {
return "linear-gradient(" + cfg.angle + "deg, " + c1 + ", " + c2 + ")";
}
function makeSwatch(color) {
var el = document.createElement("label");
el.className = PREFIX + "-swatch";
el.style.backgroundColor = color;
var input = document.createElement("input");
input.type = "color";
input.value = color;
el.appendChild(input);
return { el: el, input: input };
}
function fallbackCopy(text) {
var ta = document.createElement("textarea");
ta.value = text;
ta.style.position = "fixed";
ta.style.opacity = "0";
document.body.appendChild(ta);
ta.select();
try { document.execCommand("copy"); } catch (e) {}
document.body.removeChild(ta);
}
function buildWidget() {
var wrap = document.createElement("div");
wrap.className = PREFIX + "-container";
var c1 = cfg.randomOnLoad ? randomHex() : normalizeHex(cfg.color1, randomHex());
var c2 = cfg.randomOnLoad ? randomHex() : normalizeHex(cfg.color2, randomHex());
if (cfg.showHeading && cfg.heading) {
var h = document.createElement("h2");
h.className = PREFIX + "-heading";
h.textContent = cfg.heading;
wrap.appendChild(h);
}
var preview = document.createElement("div");
preview.className = PREFIX + "-preview";
wrap.appendChild(preview);
var colors = document.createElement("div");
colors.className = PREFIX + "-colors";
var s1 = makeSwatch(c1);
var s2 = makeSwatch(c2);
colors.appendChild(s1.el);
colors.appendChild(s2.el);
wrap.appendChild(colors);
var codeText, copyBtn;
if (cfg.showCode) {
var codeWrap = document.createElement("div");
codeWrap.className = PREFIX + "-code";
codeText = document.createElement("code");
codeWrap.appendChild(codeText);
if (cfg.showCopyButton) {
copyBtn = document.createElement("button");
copyBtn.type = "button";
copyBtn.className = PREFIX + "-copy";
copyBtn.textContent = cfg.copyLabel;
codeWrap.appendChild(copyBtn);
}
wrap.appendChild(codeWrap);
}
function render() {
var g = gradientString(c1, c2);
preview.style.background = g;
s1.el.style.backgroundColor = c1;
s2.el.style.backgroundColor = c2;
if (codeText) codeText.textContent = g;
}
s1.input.addEventListener("input", function (e) { c1 = e.target.value; render(); });
s2.input.addEventListener("input", function (e) { c2 = e.target.value; render(); });
if (copyBtn) {
copyBtn.addEventListener("click", function () {
var text = gradientString(c1, c2);
var done = function () {
copyBtn.textContent = cfg.copiedLabel;
setTimeout(function () { copyBtn.textContent = cfg.copyLabel; }, 1500);
};
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(done).catch(function () { fallbackCopy(text); done(); });
} else {
fallbackCopy(text);
done();
}
});
}
render();
return wrap;
}
function scan() {
if (document.body && document.body.classList.contains("sqs-edit-mode-active")) return;
injectStyles();
var markers = document.querySelectorAll(".sqs-html-content p");
markers.forEach(function (p) {
if (p.dataset.gcpDone) return;
if (p.textContent.trim() !== cfg.marker) return;
p.dataset.gcpDone = "true";
var widget = buildWidget();
p.parentNode.insertBefore(widget, p);
p.style.display = "none";
});
}
scan();
document.addEventListener("DOMContentLoaded", scan);
window.addEventListener("load", scan);
window.addEventListener("mercury:load", scan);
if (window.MutationObserver) {
var root = document.documentElement || document.body;
if (root) {
var obs = new MutationObserver(function () { scan(); });
obs.observe(root, { childList: true, subtree: true });
setTimeout(function () { obs.disconnect(); }, 15000);
}
}
})();
</script>
#2. Customize
nothing now
#3. Other
#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Text Block.
Add this code into Markdown
<script>
window.GradientPickerConfig = {
marker: "##gradient-color-picker",
angle: 45,
randomOnLoad: true,
color1: "#ff6b6b",
color2: "#4ecdc4",
showCode: true,
showCopyButton: true,
copyLabel: "Copy CSS",
copiedLabel: "Copied!",
previewHeight: "160px",
swatchWidth: "120px",
swatchHeight: "80px",
swatchRadius: "20px",
swatchGap: "15px",
containerMaxWidth: "500px",
containerBackground: "transparent",
containerRadius: "10px",
containerPadding: "0px"
};
</script>
<script>
(function () {
var cfg = window.GradientPickerConfig;
if (!cfg) return;
var STYLE_ID = "gcp-styles";
var PREFIX = "gcp";
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
"." + PREFIX + "-container{max-width:" + cfg.containerMaxWidth + ";margin:0 auto;text-align:center;background:" + cfg.containerBackground + ";border-radius:" + cfg.containerRadius + ";padding:" + cfg.containerPadding + ";box-sizing:border-box;}" +
"." + PREFIX + "-heading{margin:0 0 20px;font-size:26px;font-weight:600;line-height:1.2;}" +
"." + PREFIX + "-preview{width:100%;height:" + cfg.previewHeight + ";border-radius:" + cfg.containerRadius + ";margin-bottom:20px;}" +
"." + PREFIX + "-colors{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:" + cfg.swatchGap + ";}" +
"." + PREFIX + "-swatch{position:relative;display:inline-block;width:" + cfg.swatchWidth + ";height:" + cfg.swatchHeight + ";border-radius:" + cfg.swatchRadius + ";cursor:pointer;overflow:hidden;}" +
"." + PREFIX + "-swatch input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer;}" +
"." + PREFIX + "-code{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}" +
"." + PREFIX + "-code code{font-family:monospace;font-size:14px;word-break:break-all;}" +
"." + PREFIX + "-copy{cursor:pointer;border:1px solid currentColor;background:transparent;color:inherit;border-radius:6px;padding:6px 14px;font:inherit;font-size:13px;line-height:1;}";
var style = document.createElement("style");
style.id = STYLE_ID;
style.textContent = css;
(document.head || document.documentElement).appendChild(style);
}
function randomHex() {
var n = Math.floor(Math.random() * 0x1000000);
return "#" + n.toString(16).padStart(6, "0");
}
function normalizeHex(v, fallback) {
if (typeof v === "string" && /^#[0-9a-fA-F]{6}$/.test(v)) return v.toLowerCase();
if (typeof v === "string" && /^#[0-9a-fA-F]{3}$/.test(v)) {
return ("#" + v[1] + v[1] + v[2] + v[2] + v[3] + v[3]).toLowerCase();
}
return fallback;
}
function gradientString(c1, c2) {
return "linear-gradient(" + cfg.angle + "deg, " + c1 + ", " + c2 + ")";
}
function makeSwatch(color) {
var el = document.createElement("label");
el.className = PREFIX + "-swatch";
el.style.backgroundColor = color;
var input = document.createElement("input");
input.type = "color";
input.value = color;
el.appendChild(input);
return { el: el, input: input };
}
function fallbackCopy(text) {
var ta = document.createElement("textarea");
ta.value = text;
ta.style.position = "fixed";
ta.style.opacity = "0";
document.body.appendChild(ta);
ta.select();
try { document.execCommand("copy"); } catch (e) {}
document.body.removeChild(ta);
}
function buildWidget() {
var wrap = document.createElement("div");
wrap.className = PREFIX + "-container";
var c1 = cfg.randomOnLoad ? randomHex() : normalizeHex(cfg.color1, randomHex());
var c2 = cfg.randomOnLoad ? randomHex() : normalizeHex(cfg.color2, randomHex());
if (cfg.showHeading && cfg.heading) {
var h = document.createElement("h2");
h.className = PREFIX + "-heading";
h.textContent = cfg.heading;
wrap.appendChild(h);
}
var preview = document.createElement("div");
preview.className = PREFIX + "-preview";
wrap.appendChild(preview);
var colors = document.createElement("div");
colors.className = PREFIX + "-colors";
var s1 = makeSwatch(c1);
var s2 = makeSwatch(c2);
colors.appendChild(s1.el);
colors.appendChild(s2.el);
wrap.appendChild(colors);
var codeText, copyBtn;
if (cfg.showCode) {
var codeWrap = document.createElement("div");
codeWrap.className = PREFIX + "-code";
codeText = document.createElement("code");
codeWrap.appendChild(codeText);
if (cfg.showCopyButton) {
copyBtn = document.createElement("button");
copyBtn.type = "button";
copyBtn.className = PREFIX + "-copy";
copyBtn.textContent = cfg.copyLabel;
codeWrap.appendChild(copyBtn);
}
wrap.appendChild(codeWrap);
}
function render() {
var g = gradientString(c1, c2);
preview.style.background = g;
s1.el.style.backgroundColor = c1;
s2.el.style.backgroundColor = c2;
if (codeText) codeText.textContent = g;
}
s1.input.addEventListener("input", function (e) { c1 = e.target.value; render(); });
s2.input.addEventListener("input", function (e) { c2 = e.target.value; render(); });
if (copyBtn) {
copyBtn.addEventListener("click", function () {
var text = gradientString(c1, c2);
var done = function () {
copyBtn.textContent = cfg.copiedLabel;
setTimeout(function () { copyBtn.textContent = cfg.copyLabel; }, 1500);
};
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(done).catch(function () { fallbackCopy(text); done(); });
} else {
fallbackCopy(text);
done();
}
});
}
render();
return wrap;
}
function scan() {
if (document.body && document.body.classList.contains("sqs-edit-mode-active")) return;
injectStyles();
var markers = document.querySelectorAll(".sqs-html-content p");
markers.forEach(function (p) {
if (p.dataset.gcpDone) return;
if (p.textContent.trim() !== cfg.marker) return;
p.dataset.gcpDone = "true";
var widget = buildWidget();
p.parentNode.insertBefore(widget, p);
p.style.display = "none";
});
}
scan();
document.addEventListener("DOMContentLoaded", scan);
window.addEventListener("load", scan);
window.addEventListener("mercury:load", scan);
if (window.MutationObserver) {
var root = document.documentElement || document.body;
if (root) {
var obs = new MutationObserver(function () { scan(); });
obs.observe(root, { childList: true, subtree: true });
setTimeout(function () { obs.disconnect(); }, 15000);
}
}
})();
</script>
