add actual options

index.css

@@ -6,3 +6,12 @@ body {
     background-color: var(--bg);
     color: #ffffff;
 }
+
+#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;
+}

index.html

@@ -14,6 +14,9 @@
 
         <h1>Revolt role gradient generator</h1>
 
+        <p id="preview">This is a preview of your gradient.</p>
+        <input type="text" id="output" style="width: calc(100% - 8px)" value="Adjust the options, the output will appear here :3" readonly autocomplete="off" />
+
         <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 />
@@ -29,16 +32,50 @@
 
         <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 + '°'">
+            <input id="rotation" type="range" min="0" max="360" value="90" autocomplete="off" oninput="rotation_span.innerText = this.value + '°'; updateUi();">
             <span id="rotation_span">90°</span>
         </div>
 
         <div id="config_radial" style="display: none;">
             <h4>Radial</h4>
+
+            <input type="radio" id="radial_circle" value="circle" name="radial_mode" onchange="updateUi()" checked autocomplete="off" />
+            <label for="radial_circle">Circle</label><br />
+            <input type="radio" id="radial_ellipse" value="ellipse" name="radial_mode" onchange="updateUi()" autocomplete="off" />
+            <label for="radial_ellipse">Ellipse</label><br />
+
+            <p>at</p>
+
+            <input type="radio" id="radial_center" value="center" name="radial_pos" onchange="updateUi()" checked autocomplete="off" />
+            <label for="radial_center">Center</label><br />
+            <input type="radio" id="radial_top" value="top" name="radial_pos" onchange="updateUi()" autocomplete="off" />
+            <label for="radial_top">Top</label><br />
+            <input type="radio" id="radial_bottom" value="bottom" name="radial_pos" onchange="updateUi()" autocomplete="off" />
+            <label for="radial_bottom">Bottom</label><br />
+            <input type="radio" id="radial_left" value="left" name="radial_pos" onchange="updateUi()" autocomplete="off" />
+            <label for="radial_left">Left</label><br />
+            <input type="radio" id="radial_right" value="right" name="radial_pos" onchange="updateUi()" autocomplete="off" />
+            <label for="radial_right">Right</label><br />
         </div>
     
         <div id="config_conic" style="display: none;">
             <h4>Conic</h4>
+            <input id="rotation_conic" type="range" min="0" max="360" value="90" autocomplete="off" oninput="rotation_span_conic.innerText = this.value + '°'; updateUi();">
+            <span id="rotation_span_conic">90°</span>
+            <br />
+
+            <input id="conic_custom_position" type="checkbox" oninput="updateUi()"/>
+            <label for="conic_custom_position">Custom position</label>
+            <br />
+
+            <div id="custom_pos_inputs" hidden>
+                <input id="conic_x" type="range" min="0" max="100" value="50" autocomplete="off" oninput="conic_x_span.innerText = this.value + '%'; updateUi();">
+                <span id="conic_x_span">50%</span>
+                <br />
+                <input id="conic_y" type="range" min="0" max="100" value="50" autocomplete="off" oninput="conic_y_span.innerText = this.value + '%'; updateUi();">
+                <span id="conic_y_span">50%</span>
+                <br />
+            </div>
         </div>
     </body>
 </html>

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