From 75eef390ff4ed98d32383273aaa5dc53cc78dada Mon Sep 17 00:00:00 2001 From: Lea Date: Sat, 25 Mar 2023 22:45:42 +0100 Subject: [PATCH] add actual options --- index.css | 11 ++++++++++- index.html | 39 ++++++++++++++++++++++++++++++++++++++- index.js | 37 ++++++++++++++++++++++++++++++++++--- 3 files changed, 82 insertions(+), 5 deletions(-) diff --git a/index.css b/index.css index f55924a..9cc261c 100644 --- a/index.css +++ b/index.css @@ -5,4 +5,13 @@ body { background-color: var(--bg); color: #ffffff; -} \ No newline at end of file +} + +#preview { + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + width: fit-content; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-weight: 500; +} diff --git a/index.html b/index.html index a0c224b..cdf6de0 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,9 @@

Revolt role gradient generator

+

This is a preview of your gradient.

+ +

Gradient type


@@ -29,16 +32,50 @@ \ No newline at end of file diff --git a/index.js b/index.js index c8357f3..d9d3190 100644 --- a/index.js +++ b/index.js @@ -18,6 +18,7 @@ function updateUi() { let colorInput = document.createElement('input'); colorInput.type = 'color'; colorInput.value = color; + colorInput.onchange = (e) => changeColor(i, e.currentTarget.value); list.appendChild(colorInput); let button1 = document.createElement('button'); @@ -40,6 +41,14 @@ function updateUi() { list.appendChild(document.createElement('br')); } } + + document.getElementById('custom_pos_inputs').hidden = !document.getElementById('conic_custom_position').checked; + + const css = generateCss(); + if (css) { + document.getElementById('preview').style.backgroundImage = css; + document.getElementById('output').value = css; + } } function removeColor(index) { @@ -48,6 +57,18 @@ function removeColor(index) { updateUi(); } +function appendColor() { + colorsChanged = true; + colors.push('#ffbbaa'); + updateUi(); +} + +function changeColor(index, color) { + colorsChanged = true; + colors[index] = color; + updateUi(); +} + function moveUp(index) { colorsChanged = true; [colors[index], colors[index - 1]] = [colors[index - 1], colors[index]]; @@ -68,25 +89,35 @@ function generateCss() { if (radios[0].checked) return generateCssLinear(); if (radios[1].checked) return generateCssRadial(); if (radios[2].checked) return generateCssConic(); + return ''; } /** * @returns {string} */ function generateCssLinear() { - + const rotation = document.getElementById('rotation').value; + return `linear-gradient(${rotation}deg,${colors.join(',')})`; } /** * @returns {string} */ function generateCssRadial() { - + let radios = document.getElementsByName('radial_mode'); + const mode = Array.from(radios).find(r => r.checked).value ?? 'circle'; + radios = document.getElementsByName('radial_pos'); + const pos = Array.from(radios).find(r => r.checked).value ?? 'center'; + return `radial-gradient(${mode} at ${pos}, ${colors.join(',')})`; } /** * @returns {string} */ function generateCssConic() { - + const rotation = document.getElementById('rotation_conic').value; + const showCustomPos = document.getElementById('conic_custom_position').checked; + const x = document.getElementById('conic_x').value; + const y = document.getElementById('conic_y').value; + return `conic-gradient(from ${rotation}deg${showCustomPos ? ` at ${x}% ${y}%` : ''}, ${colors.join(',')})`; } // Initial update