From f25271d23b2b1368e3c848103cb4b01e95648850 Mon Sep 17 00:00:00 2001 From: Lea Date: Sat, 25 Mar 2023 21:30:32 +0100 Subject: [PATCH] init commit --- index.css | 8 +++++ index.html | 44 +++++++++++++++++++++++++ index.js | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 147 insertions(+) create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js diff --git a/index.css b/index.css new file mode 100644 index 0000000..f55924a --- /dev/null +++ b/index.css @@ -0,0 +1,8 @@ +:root { + --bg: #242424; +} + +body { + background-color: var(--bg); + color: #ffffff; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a0c224b --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + Funny gradient thingy + + + + + + +

Revolt role gradient generator

+ +

Gradient type

+ +
+ +
+ +
+ +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..c8357f3 --- /dev/null +++ b/index.js @@ -0,0 +1,95 @@ +const colors = ['#ff0000', '#00ff00', '#0000ff']; +let colorsChanged = true; + +function updateUi() { + const radios = document.getElementsByName('gradient_type'); + document.getElementById('config_linear').style.display = radios[0].checked ? 'unset' : 'none'; + document.getElementById('config_radial').style.display = radios[1].checked ? 'unset' : 'none'; + document.getElementById('config_conic').style.display = radios[2].checked ? 'unset' : 'none'; + + if (colorsChanged) { + colorsChanged = false; + const list = document.getElementById('color-list'); + while (list.lastChild) list.lastChild.remove(); + for (let i in colors) { + i = Number(i); + const color = colors[i]; + + let colorInput = document.createElement('input'); + colorInput.type = 'color'; + colorInput.value = color; + list.appendChild(colorInput); + + let button1 = document.createElement('button'); + button1.innerText = '^'; + button1.disabled = i == 0; + button1.onclick = () => moveUp(i); + list.appendChild(button1); + + let button2 = document.createElement('button'); + button2.innerText = 'v'; + button2.disabled = i == colors.length - 1; + button2.onclick = () => moveDown(i); + list.appendChild(button2); + + let button3 = document.createElement('button'); + button3.innerText = 'Delete'; + button3.onclick = () => removeColor(i); + list.appendChild(button3); + + list.appendChild(document.createElement('br')); + } + } +} + +function removeColor(index) { + colorsChanged = true; + colors.splice(index, 1); + updateUi(); +} + +function moveUp(index) { + colorsChanged = true; + [colors[index], colors[index - 1]] = [colors[index - 1], colors[index]]; + updateUi(); +} + +function moveDown(index) { + colorsChanged = true; + [colors[index], colors[index + 1]] = [colors[index + 1], colors[index]]; + updateUi(); +} + +/** + * @returns {string} + */ +function generateCss() { + const radios = document.getElementsByName('gradient_type'); + if (radios[0].checked) return generateCssLinear(); + if (radios[1].checked) return generateCssRadial(); + if (radios[2].checked) return generateCssConic(); +} + +/** + * @returns {string} + */ +function generateCssLinear() { + +} +/** + * @returns {string} + */ +function generateCssRadial() { + +} +/** + * @returns {string} + */ +function generateCssConic() { + +} + +// Initial update +setTimeout(() => { + updateUi(); +}, 0);