Lea/colorrole
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

init commit

Browse source
This commit is contained in:
Lea 2023-03-25 21:30:32 +01:00
commit f25271d23b
Signed by: Lea
GPG key ID: 1BAFFE8347019C42
3 changed files with 147 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.css Normal file
View file

@ -0,0 +1,8 @@
:root {
--bg: #242424;
}
body {
background-color: var(--bg);
color: #ffffff;
}

44
index.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>Funny gradient thingy</title>
<link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
</head>
<body>
<noscript>
<div style="width: 100vw; height: 100vh; position: fixed; background-color: var(--bg);">
<center><h1>This site requires JavaScript!</h1></center>
</div>
</noscript>
<h1>Revolt role gradient generator</h1>
<h3>Gradient type</h3>
<input type="radio" id="gradient_linear" value="gradient_linear" name="gradient_type" onchange="updateUi()" autocomplete="off" />
<label for="gradient_linear">Linear Gradient</label><br />
<input type="radio" id="gradient_radial" value="gradient_radial" name="gradient_type" onchange="updateUi()" autocomplete="off" />
<label for="gradient_radial">Radial Gradient</label><br />
<input type="radio" id="gradient_conic" value="gradient_conic" name="gradient_type" onchange="updateUi()" autocomplete="off" />
<label for="gradient_conic">Conic Gradient</label><br />
<div id="color-list">
</div>
<button onclick="appendColor()">Add Color</button>
<div id="config_linear" style="display: none;">
<h4>Linear</h4>
<input type="range" min="0" max="360" value="90" autocomplete="off" oninput="rotation_span.innerText = this.value + '°'">
<span id="rotation_span">90°</span>
</div>
<div id="config_radial" style="display: none;">
<h4>Radial</h4>
</div>
<div id="config_conic" style="display: none;">
<h4>Conic</h4>
</div>
</body>
</html>

95
index.js Normal file
View file

@ -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);